Solía manejar la descarga de archivos creando un elemento de anclaje y haciendo clic en él:
exports.saveBlobAsFileImpl = blob => filename => () => { var a = document.createElement("a"); var url = URL.createObjectURL(blob); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); setTimeout(function(){ document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100); return true; };(no importa que la función esté procesada, es porque la función se exporta a PureScript). Funciona bien, pero la desventaja es que siempre se descarga en la ubicación predeterminada y el usuario no puede sobrescribir el nombre de archivo dado. Así que recurrí a la nueva API FileSystem:
exports.saveBlobAsFileImpl = blob => filename => () => { window.showSaveFilePicker({ suggestedName: filename }) .then(fileHandle => fileHandle.createWritable()) .then(stream => { stream.write(blob); stream.close(); }) .catch(err => console.log("SaveFile aborted")); return true; };También funciona bien (el usuario elige el directorio y puede cambiar el nombre de archivo predeterminado). Sin embargo, ahora no puede abrir el archivo de inmediato, ya que no se muestra la forma en que se descargan los archivos (en la parte inferior de la pantalla en Chrome). Tiene que abrir el explorador de archivos en la carpeta en la que lo descargó y abrir desde allí.
Aquí está mi pregunta: ¿puedo tener las ventajas de ambos mundos, es decir, la capacidad del usuario para seleccionar una carpeta en la que desea descargar el blob y sobrescribir el nombre del archivo si es necesario, y mostrar el archivo descargado en la parte inferior de la pantalla para que el usuario puede abrirlo de inmediato?