Tengo una página donde uso un formulario para iniciar la descarga de un archivo. Esto es parte de un proyecto Blazor WebAssembly. Esta técnica se usa para pasar algunos parámetros a la API que genera el archivo para descargar.
Esta es la función JS que utilizo para iniciar la descarga:
function downloadFromPost(options) {
var form = document.createElement("form");
form.setAttribute("id", "frm-download");
form.setAttribute("method", "post");
form.setAttribute("style", "display: none;");
form.setAttribute("action", options.url);
var token = window.localStorage.getItem("authToken");
if (token != null) {
addHiddenField(form, "jwt", token);
}
delete options.url;
for (const property in options) {
addHiddenField(form, property, options[property]);
}
document.body.appendChild(form);
form.submit();
form.remove();
}
function addHiddenField(form, name, value) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("name", name);
hiddenField.setAttribute("value", value);
form.appendChild(hiddenField);
}
Para los interesados, esto se llama por una página de Blazor, de esta manera:
<button type="button" @onclick="Download">Download</button>
@code {
[Inject] IJSRuntime JSRuntime { get; set; }
private async Task Download()
{
await JSRuntime.InvokeVoidAsync("downloadFromPost", new { url = "api/mycontroller/download", param1, param2);
}
}
Cuando se envía el formulario, la función API tarda un tiempo en extraer datos y comenzar a transmitir el archivo.
Durante este tiempo, Chrome muestra la clásica rueca.
Cuando comienza la descarga real, la rueda giratoria se reemplaza por el ícono del sitio y el progreso de la descarga se muestra en la barra de descarga.
Me gustaría mostrar un mensaje de "esperar..." en la página mientras se prepara la descarga , es decir, cuando Chrome muestra su rueda giratoria.
Cuando comienza la descarga real, ya no la necesito, ya que la descarga tiene su propio indicador de progreso.
¿Hay alguna manera de hacer esto usando JS/Ajax/jQuery?
Encontré otras respuestas sobre esto, pero implican usar Ajax para almacenar el archivo en búfer y escribirlo en el disco. No quiero esto porque este enfoque consume memoria del cliente y se encarga de todo el procedimiento de descarga, mientras que, como ya dije, solo me interesa el paso de preparación.
Gracias