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!