其实好多文章都有介绍 我这里就把自己遇到的一个奇葩问题记录一下:
归根结底就是不要直接通过改变文件后缀名来企图创建一个word.docx文件;
首先
-- 安装 docxtemplater
npm install docxtemplater pizzip --save
-- 安装 jszip-utils
npm install jszip-utils --save
-- 安装 jszip
npm install jszip --save
-- 安装 FileSaver
npm install file-saver --save
封装组件
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
// 点击导出word
export const exportWord = (
data = {
name: "佚名",
},
docPath = "/model.docx"
) => {
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(docPath, function(error, content) {
// model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater().loadZip(zip);
// 设置模板变量的值
//set the templateVariables
doc.setData(data);
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
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");
});
};
vue-cli 3.0以上将docx文件放到public中
// 调用的话
/**
* 导出doc方法
*/
// param = {
// name: '好'
// }
exportWordFun(param) {
exportWord(
param,
`/model_${param}.docx`
);
},
效果:
切记两点:
- docx文件放到public(vue-cli2.0放到static文件夹下),路径采用‘/model.docx’形式
- docx文件 不要通过更改后缀名来创建,正儿八经建一个。