Error: Can't find end of central directory : is this a zip file ? in React & docxtemplater

Question

I am facing an issue in using docxtemplater library to generate a doc file from my react application.

If anybody know how to solve this please help me.

import React from "react";
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";

import Sample from './sample.js';

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

function App(){
        //const generateDocument = () => {
        //    fetch("http://localhost:5000/api/doc")
        //        .then(res => console.log(res))
        //};

        const generateDocument = () => {
            loadFile("./assets/docs/newTemplate.docx",function (error, content) {
              if (error) {
                  throw error;
              }

              console.log(content);

              const zip = new PizZip(content);
              const doc = new Docxtemplater(zip, {
                  paragraphLoop: true,
                  linebreaks: true,
              });

              // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
              doc.render({
                  client_name: "John",
              });
              const out = doc.getZip().generate({
                  type: "blob",
                  mimeType:
                      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
              }); //Output the document using Data-URI
              saveAs(out, "output.docx");
          }

            )};

        return (
            <div className="p-2">
                <button onClick={generateDocument}>
                    Generate document
                </button>
                <Sample></Sample>
            </div>
        );
};

export default App;

My template file is in assets/docs folder.

I tried various ways of using template in same folder & changing template with new templates but nothing worked. Please help me!

You have a console.log(content) in your code. Could you please show what the content looks like in the log file ? — edi9999, Nov 27 '21 at 15:13
Also, when you have a look at the network tag, what do you see in the response ? — edi9999, Nov 27 '21 at 15:13

score 0 · Answer 1 · edited Jan 08 '23 at 09:38

0

It might be caused by the name of the file containing Upper case, fix that - et voilà!

edited Jan 08 '23 at 09:38

Yunnosch

26,130
9
42
54

answered Jan 08 '23 at 07:21

charlie vargas

1

score -1 · Answer 2 · answered May 22 '23 at 13:40

I'm Edgar, creator of docxtemplater.

Usually, when you get the error message :

Error: Can't find end of central directory : is this a zip file ?

It means that the file is not a valid docx.

In most cases this is due to one of the following :

The URL that you are pointing to returns status code 200, but contains HTML instead of a docx file
The URL that you are pointing to returns an empty file
The URL that you are pointing to points to a file that has not been transfered completely

Error: Can't find end of central directory : is this a zip file ? in React & docxtemplater

2 Answers2