Browser docxtemplater full version

Description

This project provides a library usable in the browser with advanced features for docxtemplater (including all modules).

It allows a user to load a template file, fill it with predefined data, and then save the generated document.

Features

• Loads a DOCX/PPTX/XLSX template from a URL
• Populates the template with sample user data
• Generates a DOCX/PPTX/XLSX file
• Handles errors and saves documents with comments if issues arise
• Add images using the {%logo} syntax
• Add HTML using the HTML module
• Access to all 18 modules
• Configuration with the same object as the docker version
• Filters for data

Installation

Once you've downloaded the code, you can have a look at our demo by opening index.html in a browser.

To use the software, simply add a single script tag like this :

<script src="built/docxtemplater.umd.js"></script>

Detailed Usage Explanation

1. Retrieve the docGeneration Object:

   Copy

   /* eslint-disable-next-line no-unused-vars */
   const dg = window.docGeneration;
   

   • The docGeneration object is accessed from the window object, which is provided globally by the library.

2. Load the DOCX Template:

   Copy

   /* eslint-disable-next-line no-undef,no-unused-vars */
   const content = await dg.loadFile(
       "https://docxtemplater.com/ang-example.docx"
   );
   

   • This loads the document template from a given URL.

3. Define the Data to Inject:

   Copy

   /* eslint-disable-next-line no-unused-vars */
   const data = {
       first_name: "John",
       last_name: "Doe",
       phone: "John",
       organization: {
           companyName: "Acme Ecorp",
       },
       description: "The long description",
   };
   

   • This object contains the key-value pairs that will replace placeholders in the template.

4. Generate the Document:

   Copy

   const configuration = {};
   /* eslint-disable-next-line no-undef,no-unused-vars */
   const { blob, errorLocation } = await dg.generateDocument(
       /* eslint-disable-next-line no-undef */
       content,
       data,
       configuration
   );
   

   • The generateDocument function processes the template and applies the provided data.
   • If there are errors, errorLocation will be true.

   The configuration object has the same configuration keys as the docker version.

5. Save the Output:

   Copy

   /* eslint-disable-next-line no-undef */
   if (errorLocation) {
       /* eslint-disable-next-line no-undef */
       dg.saveAs(blob, "template-with-errors-comments.docx");
   } else {
       /* eslint-disable-next-line no-undef */
       dg.saveAs(blob, "output.docx");
   }
   

   • If errors are detected, the document is saved with comments highlighting them.
   • Otherwise, the correctly generated document is saved as output.docx.

Changing delimiters

It is possible to change the delimiters by using the following code :

const configuration = {};
/* eslint-disable-next-line no-undef,no-unused-vars */
const { blob, errorLocation } = await dg.generateDocument(
    /* eslint-disable-next-line no-undef */
    content,
    data,
    configuration,
    {
        query: { delimiters: "[[ ]]" },
    }
);

License

Full license information can be found here