vue+echarts+docxtemplater导出word页⾯（纯前端）
最近遇到⼀个将包含echarts图和Table的页⾯导出成word⽂档，研究了⼀下，决定使⽤docxtemplater 插件进⾏开发，整个思考的⽅向有以下⼏点：
编写好word模板，具体的写法，可以参考中demo，注意这个插件中很多的模板是要收费的（commercial），有⼀部分模板是免费的（带有free），简单的需求可以使⽤此插件。
对于页⾯中的Table，只需要将要写⼊⽂档的数据整理成指定的样式，具体也可以参考，注意word⽂档中所涵盖的字段名称要与传⼊的字段保持⼀致
对于echarts图的写⼊，要借⽤开源的⽅法。⾸先，echarts图通过getDataURL（）⽅法获取⼀个base64 的 URL，其次，利⽤docxtemplater-image-module-free官⽹中提供的base64DataURLToArrayBuffer（）⽅法将base64的URL进⾏转换。
前期准备：
1、按照依赖的插件docxtemplater、jszip-utils、jszip、FileSaver、docxtemplater-image-module-free
//-- 安装 docxtemplater
npm install docxtemplater pizzip  --save
//-- 安装 jszip-utils
npm install jszip-utils --save
//-- 安装 jszip
npm install jszip --save
//-- 安装 FileSaver
npm install file-saver --save
//安装 docxtemplater-image-module-free
npm install --save docxtemplater-image-module-free
2、引⼊依赖包
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
前端页面模板import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
import ImageModule from 'docxtemplater-image-module-free '
注，若引⼊docxtemplater-image-module-free 报错时，可尝试使⽤require⽅法引⼊。
let ImageModule = require('docxtemplater-image-module-free');
3、代码
// vue 页⾯
// echarts 图
<chart :options="option" :autoResize="true" ref="echart"></chart>
// table-iview
<Table ref='table' :columns="columns" :data="tableData"></Table>
// 导出按钮
<Button type="info" @click="exportWord">导出word⽂档</Button>
<script>
// 导⼊table、echarts 配置⽂件
import {echartConfig} from './config/echartConfig.js'
import {tableConfig} from './config/tableConfig.js'
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'
// import imageModule from 'open-docxtemplater-image-module'
export default {
name:'exportPage',
data(){
return {
echartData:{},
tableData: []
}
},
created(){
lenged:["⼩⽶","⼩张"],
age:[18,22]
}
this.tableData= [
{
name:"⼩⽶",
age: 18
},
{
name:"⼩张",
age:22
}
];
},
computed:{
option(){
return echartConfig(this);
},
columns(){
return tableConfig(this);
}
},
methods:{
// 导出echarts图⽚，格式转换
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
if (!st(dataURL)) {
return false;
}
const stringBase64 = place(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;
},
// 导出⽂档
exportWord(){
var ImageModule = require('open-docxtemplater-image-module');
// 点击导出word
let _this = this;
// 读取并获得模板⽂件的⼆进制内容
/
/ 抛出异常
if (error) {
throw error;
}
// 图⽚处理
let opts = {}
opts.fileType = "docx";
return _this.base64DataURLToArrayBuffer(chartId);
}
return [200,200]
}
let imageModule = new ImageModule(opts);
// 创建⼀个PizZip实例，内容为模板的内容
let zip = new PizZip(content);
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater();
doc.attachModule(imageModule);
doc.loadZip(zip);
// 设置模板变量的值
doc.setData({
table: _this.tableData,
image:_this.$DataURL() // 获取echarts图⽚
});
try {
// ⽤模板变量的值替换所有模板变量
} catch (error) {
// 抛出异常
let e = {
message: ssage,
name: error.name,
stack: error.stack,
properties: error.properties
};
throw error;
}
// ⽣成⼀个代表docxtemplater对象的zip⽂件（不是⼀个真实的⽂件，⽽是在内存中的表⽰）
let out = Zip().generate({
type: "blob",
mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
/
/ 将⽬标⽂件对象保存为⽬标类型的⽂件，并命名
saveAs(out, "exportDocx.docx");
});
}
},
}
</script>
4、参考链接
补充⼀个踩过的坑~
在定义数据是，尤其是table数据时，字符串⼀定要⽤双引号不然导出的⽂件可能没有数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。