What causes the error when using docxtemplater and JSZip/PizZip?

Question

JavaScript

Good day.
I use the docxtemplater library to substitute data into a Word document template.
To begin with, I did it right according to the example, as in the documentation, everything works ..
But as soon as I change the path of the .docx file to my own,
loadFile(" https://docxtemplater.com/tag-example.docx",functi... - the path from the documentation example
loadFile('../assets/tag-example.docx',function(error,content) - my path
immediately throws an error:
Uncaught Error: Can't find end of central directory : is this a zip file ?
at ZipEntries.readEndOfCentral(zipEntries.js?5921:191)
at ZipEntries.load(zipEntries.js?5921:296)
at new ZipEntries(zipEntries.js?5921:32)
at PizZip.module.exports [as load] (load.js?07ec:25)
at new PizZip (index.js?547c:41)
at eval (TestDoc.vue?9786:49)
at XMLHttpRequest.xhr.onreadystatechange (index .js?85d7:82)

The code itself is here:

<template>
  <div class="main-container">
    <button class="btn btn-primary" @click="renderDoc">Сформировать документ</button>
  </div>
</template>

<script>
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";

function loadFile(url,callback){
  PizZipUtils.getBinaryContent(url,callback);
}

export default {
  methods: {
    renderDoc() {
      loadFile('../assets/tag-example.docx',function(error,content){
        if (error) { throw error };

        // The error object contains additional information when logged with JSON.stringify (it contains a properties object containing all suberrors).
        function replaceErrors(key, value) {
          if (value instanceof Error) {
            return Object.getOwnPropertyNames(value).reduce(function(error, key) {
              error[key] = value[key];
              return error;
            }, {});
          }
          return value;
        }

        function errorHandler(error) {
          console.log(JSON.stringify({error: error}, replaceErrors));

          if (error.properties && error.properties.errors instanceof Array) {
            const errorMessages = error.properties.errors.map(function (error) {
              return error.properties.explanation;
            }).join("\n");
            console.log('errorMessages', errorMessages);
            // errorMessages is a humanly readable message looking like this :
            // 'The tag beginning with "foobar" is unopened'
          }
          throw error;
        }

        var zip = new PizZip(content);
        var doc;
        try {
          doc = new docxtemplater(zip);
        } catch(error) {
          // Catch compilation errors (errors caused by the compilation of the template : misplaced tags)
          errorHandler(error);
        }

        doc.setData({
          first_name: 'John',
          last_name: 'Doe',
          phone: '0652455478',
          description: 'New Website'
        });
        try {
          // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
          doc.render();
        }
        catch (error) {
          // Catch rendering errors (errors relating to the rendering of the template : angularParser throws an error)
          errorHandler(error);
        }

        var out=doc.getZip().generate({
          type:"blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        }) //Output the document using Data-URI
        saveAs(out,"output.docx")
      })
    },
  },
}
</script>

<style scoped>

</style>

Please tell me how to fix this error with "Can't find end of central directory : is this a zip file?"

Answer 1

Do you have this file in ../assets/tag-example.docx on the server? Most probably not.

Answer 2

Logically, no. So how can you replace the file that is on the server. With my file, which I want to locate locally in the project?