安装依赖
安装 docxtemplater
cnpm install docxtemplater pizzip --save
安装 jszip-utils
cnpm install jszip-utils --save
安装 jszip
cnpm install jszip --save
安装 FileSaver
cnpm install file-saver --save
ps:项目如果是vue+ts
1、需要在shims-lib.d.ts文件手动声明:declare module ‘jszip’; declare module ‘jszip-utils’;
2、需要在tsconfig.json文件中的"compilerOptions"对象加"typeRoots": [“src/@types”, “./node_modules/@types”],还要修改"exclude": [“node_modules”, “src/@types/**/*”]
在需要的文件引入
import docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';
使用
方法
// 点击导出word
exportWord() {
const tableData: any = this.tableData; //要导出word的数据
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(`/model.docx`, function (error: any, content: any) {
// model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater().loadZip(zip);
// 设置模板变量的值
doc.setData({
table: tableData,
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error: any) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties,
};
console.log(JSON.stringify({ error: e }));
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, '视频参数.docx');
});
}
html
<el-button type="primary" @click="exportWord">导出word</el-button>