0
552
Vistas¿Cómo descargar un archivo Docx o un archivo msWord usando reactjs?
He estado tratando de averiguar cómo puedo crear una funcionalidad de descarga cuando un usuario hace clic en un botón.
Traté de usar la biblioteca para guardar archivos, pero el resultado no es el esperado, también probé un cambio y usé un enfoque diferente, pero nuevamente igual.
Cuando descargo el archivo usando el segundo enfoque, que es usando la API de búsqueda, el archivo que obtengo es un archivo dañado. Consulte el código a continuación con el enlace codeSandbox también.
Enfoque 1
const onDownload1 = () => { saveAs("../../testFile.docx", "testFile.docx"); };Enfoque 2
const onDownload2 = () => { fetch("../../testFile.docx").then((response) => { response.blob().then((blob) => { let url = window.URL.createObjectURL(blob); let a = document.createElement("a"); a.href = url; a.download = "testFile.docx"; a.click(); }); }); };Enlace de código fuente completo
Haga clic para abrir en codeSandbox.
Gracias por la ayuda y el tiempo.
1 Respuestas
Responde la pregunta0
Con "../../testFile.docx" la aplicación intenta entregar el archivo desde una ruta relativa desde donde se hospeda y se entrega la aplicación. El archivo testFile.docx debe ser accesible y ser entregado correctamente.
Si sirve un archivo desde la carpeta pública
Coloque
testFile.docxen el directoriopublic./public +-/files +-testFile.docxUtilice una ruta absoluta para acceder al archivo
testFile.docx.Ejemplos:
Enfoque 1
const onDownload1 = () => { saveAs("/files/testFile.docx", "testFile.docx"); };Enfoque 2
const onDownload2 = () => { fetch("/files/testFile.docx").then((response) => { response.blob().then((blob) => { let url = window.URL.createObjectURL(blob); let a = document.createElement("a"); a.href = url; a.download = "testFile.docx"; a.click(); }); }); };
Si se importa y se usa localmente
import file from './testFile.docx';Enfoque 3
const onDownload3 = () => { saveAs(file, "testFile.docx"); };Enfoque 4
const onDownload4 = () => { fetch(file).then((response) => { response.blob().then((blob) => { let url = window.URL.createObjectURL(blob); let a = document.createElement("a"); a.href = url; a.download = "testFile.docx"; a.click(); }); }); };
