Actualmente estoy usando docx.js en mi aplicación de reacción que configuré con AWS Amplify (backend de nodo). Estoy generando varios documentos y los estoy guardando por separado usando el empaquetador para generar el documento como un blob y luego uso la función saveAs de FileSaver.js para descargar. Vea el ejemplo de código a continuación:
const aDoc = new Document(); const bDoc = new Document(); const cDoc = new Document(); // Code that adds content to each doc // Use packer to generate document as blob and download using FileSaver Packer.toBlob(aDoc).then((blob) => { // saveAs from FileSaver will download the file FileSaver(blob, "aDoc.docx"); }); Packer.toBlob(bDoc).then((blob) => { // saveAs from FileSaver will download the file FileSaver(blob, "bDoc.docx"); }); Packer.toBlob(cDoc).then((blob) => { // saveAs from FileSaver will download the file FileSaver(blob, "cDoc.docx"); }); Ahora me pregunto, ¿cómo puedo poner todo esto en un archivo ZIP y hacer que el usuario lo descargue? Realmente no he encontrado mucho, solo esto , que parece más una solución alternativa, ya que usa el tiempo de timeout para evitar problemas cuando hay muchos documentos; prefiero evitar eso y descargarlo en un archivo. He visto algunas bibliotecas, como JSZip mencionado, pero realmente no entiendo cómo obtener lo que docx.js me está dando en el archivo.
Eche un vistazo al uso de JSZip: https://www.npmjs.com/package/jszip
Reelaboré un código que usé dentro de un POC para ver cómo creo que puede funcionar con su proyecto y el código anterior.
var JSZip = require('jszip') const Demo = () => { const demoClick = () => { var zip = new JSZip() const zipFilename = 'test.zip' const blobs = [] Packer.toBlob(aDoc).then((blob) => { blobs.push(blob) }) // repeat if needed var urlArr = blobs // this will be your set of blobs you are downloading on their own right now. urlArr.forEach(function (url) { var filename = 'test.docx' zip.file(filename, url, { binary: true }) }) zip.generateAsync({ type: 'blob' }).then(function (content) { // you may need to work the content into a zip blob like this depending how FileSaver takes it const zipContents = URL.createObjectURL(content) //or const zipContents = new Blob([content], { type: 'application/zip' }) // saveAs from FileSaver will download the file FileSaver(content, zipFilename) }) } return <button onClick={demoClick}>demo</button> }Si a FileSaver no le gusta el formato del ZIP, puede usar un método de descarga/guardado no importado más simple
const zipContents = URL.createObjectURL(content) if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(content, zipFilename) } else if (isIOS && isChrome) { window.open(zipContents, '_blank') } else { const link = document.createElement('a') link.href = zipContents link.target = '_blank' link.download = zipFilename link.click() }