[绍棠] docxtemplater实现纯前端导出word

1.下载需要的依赖

2.util文件夹下创建doc.js文件

doc.js

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";
/**导出docx@param { String } tempDocxPath 模板文件路径@param { Object } data 文件中传入的数据@param { String } fileName 导出文件名称
*/
export const exportDocx = (tempDocxPath, data, fileName) => {// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {// input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error}let opts = {};opts.centered = false;opts.getImage = function (tagValue) {return new Promise(function (resolve, reject) {JSZipUtils.getBinaryContent(tagValue, function (error, content) {if (error) {return reject(error);}return resolve(content);});});};//图片有关代码，没有图片的可以删除opts.getSize = (img, tagValue, tagName) => {return [200, 105]; //图片大小 （固定的）// 非固定（这里是设置宽度最大为300px的图片）// return new Promise(function (resolve, reject) {//     let image = new Image();//     image.src = tagValue;//     let imgWidth, imgHeight, scale;//     image.onload = function () {//         imgWidth = image.width;//         imgHeight = image.height;//         scale = 0;//         if (imgWidth > 300) {//             scale = 300 / imgWidth;//             imgWidth = 300;//             imgHeight = imgHeight * scale;//         }//         resolve([imgWidth, imgHeight]);//     };//     image.onerror = function (e) {//         console.log("img, tagValue, tagName : ", img, tagValue, tagName);//         reject(e);//     };// });};let imageModule = new ImageModule(opts);// 创建一个JSZip实例，内容为模板的内容const zip = new PizZip(content)// 创建并加载docxtemplater实例对象const doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile();doc.resolveData({ ...data.form }).then(() => {doc.render()const out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}) // Output the document using Data-URIsaveAs(out, fileName)}).catch(err => console.log('errorsss', err))})
}

3.创建.docx文档，示例：

注意： 这个.docx模板放在public文件夹里

word表格里面写的编码的含义：

{xxx} 直接渲染数据的xxx字段
{#xxx}{/xxx} 循环数组数据
{%xxx} 渲染图片

例：若

let content = ["a", "b", "c"];

渲染用

{#content}  // 循环开始{.} // 数组每个成员的内容{/content} // 循环结尾

let jtqkList = [{name:"独生子女", checked:false}, {name:"单亲", checked:false}, {name:"父母离异", checked:false}];

模板

{#jtqkList}{#checked}（ √ ）{/checked}{^checked}（  ）{/checked} {name}{/jtqkList}

4.要求后端返回数据格式如下：

const data = {title: "工作日报",officeName: '',options: [{index:1, name:'测试数据', number: 1, remark:'这是一条备注信息'}], //存放表格数据filler: '',filledTime: '',imgList: [{img: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA17ORRg.img?w=640&h=336&m=6'},{img: 'https://images.pexels.com/photos/3291250/pexels-photo-3291250.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load'}] //图片数据}

5.调用方法导出word

import { exportDocx } from '@/utils/doc.js'
const exportWord = () => {const data = {form: data}exportDocx('/template.docx', data, `${deta.title}.docx`)
}

成果