一、下载依赖
npm install docxtemplater pizzip --save // 处理docx模板
npm install jszip-utils --save
npm install jszip --save
npm install file-saver --save // 处理输出文件
二、在public文件夹下创建template/analysis-report.docx
三、在组件中引用
<template>
<div style="height: 100%;">
<div class="editor-scroll" >
<vue-office-docx
:src="out"
style="height: calc(100vh - 193px);"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
</template>
<script>
import JSZipUtils from "jszip-utils";
import docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import PizZip from "pizzip";
data() {
return {
out: ''
};
},
mounted(){
this.init(detailData)
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler(e) {
console.log("渲染失败", e)
},
init(docxData) {
var ImageModule = require('docxtemplater-image-module-free');
JSZipUtils.getBinaryContent('./template/analysis-report.docx', (error, content) => {
if (error) {
throw error
}
// 图片处理开始
let opts = {}
opts = {
//图像是否居中
centered: true
};
opts.getImage = (chartId) => {
return this.base64DataURLToArrayBuffer(chartId);
}
opts.getSize = function() {
return [600, 342]
}
//图片处理结束 没有图片可去掉这一段
var zip = new PizZip(content);
var doc = new docxtemplater()
doc.attachModule(new ImageModule(opts)); //没有图片可以去掉这一段
doc.loadZip(zip);
//获取数据
doc.setData({
...docxData
});
try {
doc.render()
} catch (error) {
var e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties,
}
console.log(e, error);
throw error;
}
this.out = doc.getZip().generate({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
})
})
},
// 导出docx
exportReportFile(type, docxData) {
saveAs(this.out, `文件名称.docx`)
},
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
if (!base64Regex.test(dataURL)) {
return false;
}
const stringBase64 = dataURL.replace(base64Regex, "");
let binaryString;
if (typeof window !== "undefined") {
binaryString = window.atob(stringBase64);
} else {
binaryString = new Buffer(stringBase64, "base64").toString("binary");
}
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
const ascii = binaryString.charCodeAt(i);
bytes[i] = ascii;
}
return bytes.buffer;
},
}
</script>
注意,导出所使用的模板的路径在public中,使用’/word.docx’或’word.docx’都可以导出,但是build导出后,服务器会爆404找不到文件,所以使用’word.docx’
在docx模板中使用的使用
对于普通的字符串、数字等普通类型直接使用{}包裹住即可使用:{num}、{str}
使用判断需要加入符号并包裹:
if:{#isShow}{str}{/isShow} #开头 /结尾 isShow进行判断为true则显示str
if-else:{#isShow}{str1}{/isShow}{^isShow}{str2}{/isShow} else为 ^开头 /结尾
数组、对象的使用:
{#data}{name}{age}{address}{/data} 和判断一样的包裹方式,可以理解为先判断是否有无,有的话遍历或查找data中的name、age、address
如果是数组包字符串:
{#data}{.}{/data} 把里面指定的属性名改为 . 即可
导出的样式问题
模板可自动让得到的数据继承引用代码的样式:
数据 str 为 “字符串”,在模板中引入 {str}(下划线)(大括号也需要有下划线)
下载后,文件中便会有 字符串(下划线) 样式(???是csdn没有下划线的功能还是我没找到)