SoFunction
Updated on 2025-04-14

vue uses docxtemplater to export word

docxtemplater

docxtemplater is a mail merging tool that programmatically uses and processes conditions, loops, and can be extended to insert anything (tables, html, images).

npm is the easiest way to install docxtemplater

npm install docxtemplater pizzip --save​
// Install docxtemplaternpm install docxtemplater pizzip  --save
// Install jszip-utilsnpm install jszip-utils --save 
// Install jszipnpm install jszip --save
// Install FileSavernpm install file-saver --save
// Introduce plug-in for processing pictures 1npm install docxtemplater-image-module-free --save
// Introduce plug-in 2 for processing picturesnpm install angular-expressions --save

vue uses docxtemplater to export word

Install

// Install docxtemplaternpm install docxtemplater pizzip  --save
// Install jszip-utilsnpm install jszip-utils --save 
// Install jszip npm install jszip --save
// Install FileSavernpm install file-saver --save
// Introduce plug-in for processing pictures 1npm install docxtemplater-image-module-free --save
// Introduce plug-in 2 for processing picturesnpm install angular-expressions --save

Prepare the word template to the project public folder

Common syntax

1. Use single variables

{name}

2. Array object loop

{#list}  {name} {age} {/list}

3. Picture (base64/url)

{%imgurl}

Encapsulation and export method

import docxtemplater from 'docxtemplater';
    import PizZip from 'pizzip';
    import JSZipUtils from 'jszip-utils';
    import { saveAs } from 'file-saver';
    import ImageModule from 'docxtemplater-image-module-free';


    //Replace the object with null and undefined values    // Parameter 1 Object to be processed Parameter 2 Replaced value    const replaceNull = (someObj, replaceValue = "***") => {
        const replacer = (key, value) =>
        String(value) === "null" || String(value) === "undefined" ?         replaceValue : value;
        return ((someObj, replacer));
    }

    /**
      4. Export docx
      5. @param { String } tempDocxPath template file path
      6. @param { Object } data passed in data file
      7. @param { String } fileName Export file name
     */
    export const exportWord = (tempDocxPath, data, fileName) => {
        //Filter empty values           data = replaceNull(data, '')
        function base64DataURLToArrayBuffer(dataURL) {
            const base64Regex =     /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
            if (!(dataURL)) {
                return false;
            }
        (dataURL);
        const stringBase64 = (base64Regex, "");
        let binaryString;
        if (typeof window !== "undefined") {
            binaryString = (stringBase64);
        } else {
            binaryString = new Buffer(stringBase64, "base64").toString("binary");
        }
        const len = ;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
            const ascii = (i);
            bytes[i] = ascii;
        }
        return ;
    }
    // Read and obtain the binary content of the template file    (tempDocxPath, (error, content) => {
        if (error) {
            throw error;
        }
        const imageOptions = {
            getImage(tag) {
                return base64DataURLToArrayBuffer(tag);
            },
            getSize() {
                return [100, 100];
            },
        };
        let zip = new PizZip(content);
        let doc = new docxtemplater();
        (zip);
        (new ImageModule(imageOptions));
        (data);
        
        try {
            ();
        } catch (error) {
            let e = {
                message: ,
                name: ,
                stack: ,
                properties: ,
            };
            ({
                error: e
            });
            throw error;
        }
        let out = ().generate({
            type: "blob",
            mimeType: "application/",
        }); //Output the document using Data-URI
        saveAs(out, fileName);
    });
};

Encapsulation method

import { exportWord } from '/@/utils/exportFile';

    const handleExport = async (data: any) => {
            exportWord('/wordTemplate/', data, 'Notification.docx');
    }

This is the article about vue using docxtemplater to export word. For more related vue docxtemplater to export word content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!