引用插件
安装
npm i docxtemplater@3.17.6
npm i pizzip
npm i jszip-utils@0.1.0
npm i jszip@2.6.1
npm i file-saver@2.0.2
npm i open-docxtemplater-image-module
引入插件
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
Word模板
不要慌,很容易的,新建个word,编写变量即可(demo_word.docx,可将word文档放在static下面)
注:语法可参考网站:Interactive demo | Docxtemplater | docxtemplater
data数据
echartUrl1: '',
clients: [
{
"first_name": "John",
"last_name": "Doe",
"phone": "+44546546454"
},
{
"first_name": "Jane",
"last_name": "Doe",
"phone": "+445476454"
}
]
页面函数 (注意word.docx模板文件vue3放在public文件夹,vue2放在static文件夹即可。)
/**
* description: 导出echarts图片,格式转换
*
* created by aa on 2020-08-18
*
*/
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|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;
},
/**
* description: 导出文档
*
* created by aa on 2020-08-18
*
*/
exportWord(){
var ImageModule = require('open-docxtemplater-image-module');
// 点击导出word
let _this = this;
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent("word.docx",function(error, content) {
// exportTemplate.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
// 图片处理
let opts = {}
opts.centered = true; // 图片居中,在word模板中定义方式为{%%image}
opts.fileType = "docx";
opts.getImage = function(chartId){
return _this.base64DataURLToArrayBuffer(chartId);
}
opts.getSize = function(){
return [600,300]
}
let imageModule = new ImageModule(opts);
// 创建一个PizZip实例,内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater();
doc.attachModule(imageModule);
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({
clients: _this.clients,
image1:_this.echartUrl1, // 获取echarts图片
});
try {
// 用模板变量的值替换所有模板变量
doc.render();
} catch (error) {
// 抛出异常
let e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(e)
throw error;
}
// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
let out = doc.getZip().generate({
type: "blob",
mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
// 将目标文件对象保存为目标类型的文件,并命名
saveAs(out, "word文档名称.docx");
});
},
echart图片获取
// 基于准备好的dom,初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart1.setOption(this.option1);
// 获取echart图片需要延时,不然获取不到完整的
const that = this
// 延时获取图片,因为有动画效果,立即获取回导致获取的照片显示不全
setTimeout(function () {
that.echartUrl1 = myChart1.getDataURL();
}, 1000)
// this.getChartUrl(id, chart1)
// 或者不加定时器,可以在echarts的options中加入下面一行,取消动画效果
// animation: false,
相关文章:vue导出word文档