Updated How to create multiple Documents with Docx.js with JSON data in JavaScript

I created a post about this topic but this topic was a little obsolete and on the same video people was a little confuse because the code of sandbox didn’t work for them and for me too I was a little upset about codesanbox but finally I updated the post and update the code and the video.

This is the video if you want to check it out

HTML5 structure and CSS3

In this case I only used a button on the HTML5 and a little Css3 to create a simple button with his id

Creating local html document

It looks like this

Creating Button to create Dynamic Documents

Libraries

We need these libraries File-saver and docx.js the ultimate version inserted in our index.html

Example Importing libraries

<!-- Libraries -->
<script src="https://unpkg.com/docx@5.0.2/build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
<!-- Libraries -->

Structure for JavaScript

in our app.js first we need to get the id of the button then we add an event listener in this case is a click event and finally we passed another function called startPDF()

Example Importing libraries

Creating the start function

Then we need to create a variable when we insert the doc instance

Example create new object of docx

then at the variable doc we need to addSection and paragraphs and text like this, in this case doc save all the paragraphs and text that we insert on it, this is the new version and structure that the documentation bring to us it needs children to wrap the paragraphs and inside paragraph another children to wrap the text and so on

Example how we need to use this structure to create Documents

Then we need to export our documents we need to use the Packer class to wait the promise to create a blob and then add this blob to the saveAs() function, it only receives two arguments the blob and the name of the document in this case hi.docx.

Example using Blob to create the document and export the document with saveAs

And then click on the button, and we get our first document

Example The document is created

Inside the document

Then we need information from an Excel to create dynamic documents in this case We are going to use information from and excel paste the information in this page https://www.convertcsv.com/csv-to-json.htm to create JSON data, and we will call it FakeDataJson

Excel data

Example Transforming data from Excel to Json

Example JSON Data

Create a variable with all the JSON data

Then we create a for loop and inside it, we add an auto invoke function and inside that auto invoke function we add a setTimeout, and then we add the DOCX data because if you don't want to lost data we need to delay the for loop a little to create the correct amount of time to generate each document when I tried this without delay the creation of the documents were so fast and when the loop finally end, I got 4 documents of 10.

Example Create the dynamic document with autoinvoke function

But we need to create a function that receives three parameter the firs is the doc the sec is the DOCX and the third is the name of our document

Passing more parameter to create word documents

Finally, we add more paragraphs and set the variable of the data with the i and the country the age the name, etc complete dynamic.

Example adding more variables

Example adding more variables

And yes we get our documents

Example Creating Dynamic documents

Example inside every document

Conclusion

This is an updated version of my old post: Create dynamic word documents using DOCX Js, file-saver and data from an EXCEL or JSON this is a great tool to create multiple documents and the structure is better than the past version.

Sources

https://medium.com/@olivertate274/create-dynamic-word-documents-using-docx-js-file-saver-and-data-from-an-excel-or-json-dbd5e4ec823f
https://docx.js.org/#/
https://youtu.be/71d7Uo5lsQg
https://www.convertcsv.com/csv-to-json.htm

Complete code

https://github.com/rodrigofigueroa/docxjsexample