npm install docxtemplater jszip --save
npm install docxtemplater-image-module-free --save // 这个是图片处理的
npm install jszip-utils --save
npm install pizzip --save
npm install file-saver --save
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import ImageModule from "docxtemplater-image-module-free";
import {saveAs} from "file-saver";
export default {
name: "exportDocTemplate",
data() {
return {
interModelCanvasId: "roadModel5", // 路口模型对应的id
acsInfo: {
exportYear: 2020,
exportMonth: "07",
exportDay: "06",
name: "迎宾路-南街",
acs_id: 110100,
unit1: "浙大中控",
unit2: "交警大队",
acs_version: "ACS500_P_HW1.0.0",
versionDate: "20171106",
ip: "33.81.33.108",
interImg: null
},
lightTypeArrs: [{
type: "东向西",
light1: "左转箭头",
light2: "圆盘",
light3: "右转箭头",
light4: "非机动车灯",
light5: "人行灯",
light6: "",
light7: ""
}, {
type: "南向北",
light1: "左转箭头2",
light2: "圆盘2",
light3: "右转箭头2",
light4: "非机动车灯2",
light5: "人行灯2",
light6: "",
light7: ""
}, {
type: "西向东",
light1: "左转箭头3",
light2: "圆盘3",
light3: "右转箭头3",
light4: "非机动车灯3",
light5: "人行灯3",
light6: "",
light7: ""
}, {
type: "北向南",
light1: "左转箭头4",
light2: "圆盘4",
light3: "右转箭头4",
light4: "非机动车灯4",
light5: "人行灯4",
light6: "",
light7: ""
}],
roadPlanInfo: {
planExportDate: '2020.07.01 12:00-"导出时间"',
datas: [
{
startTime: "00:00",
planNum: 1,
phaseOrders1: "A",
phaseOrders2: "B",
phaseOrders3: "C",
phaseOrders4: "D",
phaseOrders5: "",
phaseOrders6: "",
phaseTime1: 30,
phaseTime2: 20,
phaseTime3: 30,
phaseTime4: 20,
phaseTime5: "",
phaseTime6: "",
cycleTime: 100,
offsetA: "A",
offsetTime: 0
},
{
startTime: "07:00",
planNum: 1,
phaseOrders1: "A",
phaseOrders2: "B",
phaseOrders3: "C",
phaseOrders4: "D",
phaseOrders5: "E",
phaseOrders6: "",
phaseTime1: 40,
phaseTime2: 15,
phaseTime3: 20,
phaseTime4: 30,
phaseTime5: 20,
phaseTime6: "",
cycleTime: 125,
offsetA: "A",
offsetTime: 0
}
]
},
historyPlanInfos: []
};
},
created() {
this.initHistoryPlanInfos();
},
methods: {
initHistoryPlanInfos() {
let historyPlanInfos = [];
for (let i = 0; i < 4; i++) {
let temp = {
index: i + 1,
planExportDate: '2020.07.01 12:00-"导出时间"' + i,
datas: [
{
startTime: "00:00",
planNum: 1,
phaseOrders1: "A",
phaseOrders2: "B",
phaseOrders3: "C",
phaseOrders4: "D",
phaseOrders5: "",
phaseOrders6: "",
phaseTime1: 30,
phaseTime2: 20,
phaseTime3: 30,
phaseTime4: 20,
phaseTime5: "",
phaseTime6: "",
cycleTime: 100,
offsetA: "A",
offsetTime: 0
},
{
startTime: "07:00",
planNum: 2,
phaseOrders1: "A",
phaseOrders2: "B",
phaseOrders3: "C",
phaseOrders4: "D",
phaseOrders5: "E",
phaseOrders6: "",
phaseTime1: 40,
phaseTime2: 15,
phaseTime3: 20,
phaseTime4: 30,
phaseTime5: 20,
phaseTime6: "",
cycleTime: 125,
offsetA: "A",
offsetTime: 0
}
]
};
historyPlanInfos.push(temp);
}
this.historyPlanInfos = historyPlanInfos;
},
getStaticPath(appendPath) {//模板文件放在静态目录下，需要从静态目录下获取路径
const origin = location.origin;
const pathNameArr = location.pathname.split("\/");
const linkPath = pathNameArr.slice(0, pathNameArr.length - 2).join("\/");
const configFile = `${origin}${linkPath}${appendPath}`;
return configFile;
},
exportDocx() { // 这个是导出的方法
let docxUrl = this.getStaticPath("/common/inter_plan_infos_templates.docx");
JSZipUtils.getBinaryContent(docxUrl, (err, content) => {
if (err) {
throw err;
}
let interModelCanvas = document.getElementById(this.interModelCanvasId);
if (interModelCanvas) {
// 路口模型图片
this.acsInfo.interImg=interModelCanvas.toDataURL();
}
interModelCanvas = undefined;
let opts = {
centered: false,
getImage(tagValue, tagName) {
return new Promise((resolve, reject) => {
JSZipUtils.getBinaryContent(tagValue, (error, content) => {
if (error) {
return reject(error);
}
return resolve(content);
});
});
},
getSize(img, tagValue, tagName) {
return [470, 210];
// return new Promise((resolve, reject) => {
// });
}
};
const imageModule = new ImageModule(opts);
const zip = new PizZip(content);
const doc = new Docxtemplater().loadZip(zip)
.attachModule(imageModule).compile();
doc.resolveData({ // 如果包含异步数据，用resolveData，在回调之后再处理，如果都是同步数据，直接用setData就可以
name: this.acsInfo.name,
acs_id: this.acsInfo.acs_id,
exportYear: this.acsInfo.exportYear,
exportMonth: this.acsInfo.exportMonth,
exportDay: this.acsInfo.exportDay,
unit1: this.acsInfo.unit1,
unit2: this.acsInfo.unit2,
acs_version: this.acsInfo.acs_version,
versionDate: this.acsInfo.versionDate,
ip: this.acsInfo.ip,
interImg: this.acsInfo.interImg,
lightTypeArrs: this.lightTypeArrs,
roadPlanInfo: this.roadPlanInfo,
historyPlanInfos: this.historyPlanInfos
}).then(() => {
// doc.setData({
// name: this.acsInfo.name,
// acs_id: this.acsInfo.acs_id,
// exportYear: this.acsInfo.exportYear,
// exportMonth: this.acsInfo.exportMonth,
// exportDay: this.acsInfo.exportDay,
// unit1: this.acsInfo.unit1,
// unit2: this.acsInfo.unit2,
// acs_version: this.acsInfo.acs_version,
// versionDate: this.acsInfo.versionDate,
// ip: this.acsInfo.ip,
// interImg: this.acsInfo.interImg,
// lightTypeArrs: this.lightTypeArrs,
// roadPlanInfo: this.roadPlanInfo,
// historyPlanInfos: this.historyPlanInfos
// });
try {
doc.render();
} catch(err) {
throw err;
}
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
saveAs(out, this.acsInfo.name + "交叉路口模板"+".doc"); // 注意这里加下后缀，因为有些地方导出文件类型的文件，不能识别类型
});
});
}
}
}
- 3、模板语法参考官网
官网学习地址：https://docxtemplater.com/modules/image/#interactivedemo
