background

In my work, I met a requirement that users create a Word template by themselves, upload it to the web page, and render our data in the corresponding place of Word and export it.

Github decided to use the following techniques:

  1. Upload and package data with PizZip github.com/open-xml-te…
  2. Docxtemplater is used to assign and render variables in the document github.com/open-xml-te…
  3. Use FileSaver to realize the local saving of document data github.com/eligrey/Fil…

One of the simplest implementations

Docxtemplater can get variables wrapped with special symbols (such as’ {} ‘) in the imported Word data and assign values to them, thus accomplishing the assignment of templates.

Here’s a simple implementation using Angular:

import { Component } from '@angular/core';
import * as docxtemplater from 'docxtemplater';
import * as inspect from 'docxtemplater/js/inspect-module';
import * as PizZip from 'pizzip';
import * as pizzipUtils from 'pizzip/utils';
import * as FileSaver from 'file-saver';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
exportClass AppComponent {/ / load file loadFile (url, callback) {pizzipUtils. GetBinaryContent (url, callback); // Load the file into binary}generate() {
      this.loadFile('.. /assets/test.docx'.function(error, content) {

          if(error) { throw error; } const zip = PizZip(content); // Convert content to PizZip const doc = new docxTemplater ().loadzip (zip); // Get the templater object // Assign the variable in Word to doc.setdata ({title:'Template Tests',
            anthor: 'elc',
            time: '2019-10-2', content: `docxtemplater is a mail merging tool that is used programmatically and handles conditions, loops, and can be extended to insert anything (tables, html, images).` }); try { doc.render(); } catch (error) {const e = {message: error. Message, name: error. Name, stack: error.stack, properties: error.properties, }; console.log(JSON.stringify({error: e})); throw error; } // Generate output data, The data type is bloB type recognized by FileSaver plug-in. It can also generate string, Base64, Uint8array, Arraybuffer console.log(doc.getzip (). Generate) const out = doc.getzip (). Generate ({type: 'blob'
          });
          FileSaver.saveAs(out, 'output.docx'); // Save and print}); }}Copy the code

Here is the file template passed in:

This is the result of exporting the file:

Import circular data

The template importing loop data is wrapped with ‘{#}’ and ‘{/}’. Such as:

 doc.setData({
    heros: [
      {
        heroName: 'Lina',
        heroCamp: 'radiant',
        heroEquipment: 'drogon'
      },
      {
        heroName: 'Earth Shocker',
        heroCamp: 'radiant',
        heroEquipment: 'blink dragger'
      },
      {
        heroName: 'Lion',
        heroCamp: 'Dire',
        heroEquipment: 'drogon'}}]);Copy the code

Such a loop can be used in a table

doc.setData({
    heroTable: [
      {
        hero_name: 'Lina',
        hero_camp: 'radiant',
        hero_equipment: 'drogon'
      },
      {
        hero_name: 'Earth Shocker',
        hero_camp: 'radiant',
        hero_equipment: 'blink dragger'
      },
      {
        hero_name: 'Lion',
        hero_camp: 'Dire',
        hero_equipment: 'drogon'}]});Copy the code

Import data by condition

Variables starting with # can add conditions to control the import, {/} can represent or, to control various conditions. To use this method, you need to import the Angular Parse plug-in and set up the template. The following cases:

 doc.setData({
            users: [
              {
                name: 'John'
              },
              {
                name: 'Mary'
              },
              {
                name: 'Jane'
              },
              {
                name: 'Sean'}}]);Copy the code

summary

Using basic usage and looping data, you can start with almost any template creation. Official also provides some table, HTML,grid and other more convenient plug-ins, but to charge…

{title} and {title} are two variables.

To get template variables dynamically, import the inspect Module to parse the data:

import * as inspect from 'docxtemplater/js/inspect-module';


getTages(doc: docxtemplater) {
    const iModule = inspect();
    doc.attachModule(iModule);
    doc.render();
    const tags = iModule.getAllTags();
    console.log(tags);
    return tags;
  }
Copy the code

Other more detailed things. Please refer to the document docxtemplater readthedocs. IO/en/latest/I…