Quería poder descargar un archivo csv almacenado en s3 desde un navegador, así que escribí el siguiente código usando FileSaver.js.
import { saveAs } from 'file-saver'; const downloadUrl = () => { saveAs( 'https://-----s3 url--- ', 'filename' ) } <button onClick={downloadUrl}>click to download</button>Funciona en Chrome y Firefox, pero solo en Safari en Mac, el archivo no se descarga y la página solo cambia. Y hay texto distorsionado.
Para resolver este problema, probé otros métodos como el siguiente, pero no funcionaron.
<a href='https://-----s3 url--- ' download > click to download </a>¿Hay una mejor manera de resolver este problema?
Gracias.
Tuve el mismo problema que muchas otras personas: https://github.com/eligrey/FileSaver.js/issues/375
Lo que hice fue crear una función que verificaba si el usuario está en iOS/Safari, abrió el archivo en una nueva ventana, de modo que el usuario necesitaba hacer clic adicional en otra pestaña para guardar el archivo:
const download = result => { if (iOSUser) { window.location.replace(result, '_blank'); } else { createDownloadLink(result); } }; const createDownloadLink = (data) => { const a = document.createElement('a'); a.setAttribute('target', '_blank'); document.body.appendChild(a); a.download = data.fileName; const URL = window.URL || window.webkitURL; const downloadUrl = URL.createObjectURL(data.blob); a.href = downloadUrl; a.click(); URL.revokeObjectURL(downloadUrl); document.body.removeChild(a); }; const iOSUser = ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform);