How to attach image at first page in docx file nodejs?

Question

Now I want to implement a functionality to add QR code image at the first page of an existing docx file in nodejs.

I've tried these three methods but not able to solve.

1. I tried with docx package, but it only allows to build docx file from scratch.
2. I tried with docxtemplater, but it only allows to replace {%image} into image file.
3. I tried to generate a new docx file that contains qr code image only and merge it with original docx file. But could not find any suitable package for docx merge.

Is there any solution here? Thanks in advance.

Answer 1

Actually, it is hard to attach image directly to docx file.

To do so, you need to add the image into word/media folder, update relation in word/_rels/document.xml.rels file and add proper xml string which represent the image to word/document.xml file.

But it doesn't work well with most files and it will corrupt even though the file is recoverable.

So my suggestion is to add {%image} text into docx file and replace it with the image using docxtemplater.

To add {%image} into docx file, you need to add this xml string <w:p><w:pPr><w:jc w:val="center"/></w:pPr><w:r><w:t xml:space="preserve">{%image}</w:t></w:r></w:p> into word/document.xml.

    const originFile = fs.readFileSync(path.resolve('origin.docx'), 'binary');
    const originZip = await JSZip.loadAsync(originFile);

    const originDocumentFile = originZip.file(/^word\/document[0-9]*.xml$/)[0];
    let originDocumentXml = await originDocumentFile.async("string");
    const startIndex = originDocumentXml.indexOf("<w:body>") + 8;
    originDocumentXml = originDocumentXml.slice(0, startIndex) + '<w:p><w:pPr><w:jc w:val="center"/></w:pPr><w:r><w:t xml:space="preserve">{%image}</w:t></w:r></w:p>' + originDocumentXml.slice(startIndex);
    originZip.file(originDocumentFile.name, originDocumentXml);

    const updateFile = await originZip.generateAsync({ type: 'nodebuffer' });
    fs.writeFile("output.docx", updateFile, function(err) {/*...*/});

Answer 2

It's likely much harder to merge or edit files in a clean way. My idea is to parse the file so that you can edit it in form of some easy-to-use JSON structure.

I haven't found any good libraries for reading docx files but they are just zip archives. Inside you'll find some folders and files. One of them is /word/document.xml. That's where the actual contents of the document are stored.

You could probably just parse the XML in there, inject your own and re-serialize it into the file. If you wanted it to be centered or a specific size you might have to edit the styles file too.

Alternatively you might be want to parse the contents and create a whole new word document use the docx package, which you referred to. This may and will probably result in you loosing styles.

It depends on why you are injecting the QR code. You might want to consider a whole new option, like just having the user write whatever they were writing in a Markdown editor and exporting that as a PDF. That would most likely be easiest.