How to edit XML in zip document and save changes?

Question

How to edit XML in zip document and save changes? I get the desired file, replace the data, but I don't understand how to download it back to the zip file. The data in the console changes, but not in the file

({
    doInit: function (component, event, helper) {
        console.log('recordId', component.get("v.recordId"))
        helper.showSpinner(component);
        helper
            .apex(component, "getOppAndRelated", {
                recId: component.get("v.recordId"),
            })
            .then(function (record) {
                console.log("record", record);
                helper
                    .apex(component, "getTemplate", {
                        recId: component.get("v.recordId"),
                    })
                    .then(function (template) {
               
                        var new_zip = new JSZip();
                        //////////
                        console.log('123')

                        const bufferArray = helper.base64ToArrayBuffer(component, template);
                        var blob = new Blob([bufferArray]);
                        // link.href = window.URL.createObjectURL(blob);
                        // // Construct filename dynamically and set to link.download
                        // link.download = 'te.zip';
                        var link = window.document.createElement('a');

                        new_zip.loadAsync(blob )
                            .then(function (zip) {
                                // you now have every files contained in the loaded zip
                                zip.file("word/document.xml").async("string").then(function(content) {
                                    console.log("content" + content);
                                    content = content.replace("PURCHASE ORDER CONFIRMATION","PURCHASE ORDER_Test");

                                    console.log("contentAfter" + content);
                                    
                                }) // a promise of "Hello World\n"
                            })
                            setTimeout(() => { 
                                link.href = window.URL.createObjectURL(blob);
                                link.download = 'te.zip';
                                console.log("Data:" + link);
                                                            
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        helper.hideSpinner(component);
                        helper.closeModal(component)
                             }, 1000);  
                    })
                    .catch(function (error) {
                        console.log(error);
                        helper.hideSpinner(component);
                        helper.showToast(component, "Error", "error", "Can't get templates");
                        helper.closeModal(component)
                    });
            })
            .catch(function (error) {
                console.log(error);
                helper.showToast(component, "Error", "error", "Something wrong. Mb you don't have related Invoice Instructions");
                helper.hideSpinner(component);
                helper.closeModal(component)
            });
    }
})

Answer 1

Much like how you open a file in Microsoft Word, then edit it, then Save it, the same is true here. You're not working with the compressed file directly, just a copy of it. Something like the following should work:

content = content.replace("PURCHASE ORDER CONFIRMATION","PURCHASE ORDER_Test");
zip.file("word/document.xml", content);
zip.generateAsync().then((content) => {
  const a = document.createElement('a');
  a.href = 'data:application/zip;base64,'+content;
  document.body.appendChild(a);
  a.download = 'MyWordDoc.docx';
  a.click();
})