Menu
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.
{%image} into image file.Is there any solution here? Thanks in advance.
336
Python docx module allows user to manipulate docs by either manipulating the existing one or creating a new empty document and manipulating it. It is a powerful tool as it helps you to manipulate the document to a very large extend. To add an image in a word document we use add_picture () method.
Run the above class to see the output in word_images.docx file. The file is created under root directory of the project. Now open the created word document you should see the expected output similar to below image. That’s all about how to add images to word docx using apache poi and Java libraries.
The below class basically adds or inserts two images into the word file. You need to create first document object and paragraph object. Then You have to read the image details and insert the images into the word document.
This snippet is particularly useful if you want to programmatically insert pictures in an existing document. Show activity on this post. This is adopting the answer written by Robᵩ while considering more flexible input from user. My assumption is that the HTML field mentioned by Kais Dkhili (orignal enquirer) is already loaded in docx.Document ().
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) {/*...*/});
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
