vue项⽬前端导出word⽂件(bug解决)
摘要:之前项⽬中导出价格表是由后端实现,前端只需要调⽤接⼝下载word即可,后来业务改变⽐较⼤,word模版需要⼀直改动,后端改起来相对⿇烦,后来直接前端⾃⼰定义模版,实现下载word⽂档。
⼀、需要安装的依赖
1、docxtemplater
介绍:docxtemplater是⼀种邮件合并⼯具,它以编程⽅式使⽤,处理条件、循环,并且可以扩展为表格、HTML、图像等。
安装⽅法:cnpm i docxtemplater@^3.9.1
2、FileSaver
介绍:FileSaver.js是在客户端保存⽂件的解决⽅案,⾮常适合需要⽣成⽂件,或者保存不应该发送到外部服务器的敏感信息的应⽤。
安装⽅法:cnpm i file-saver@^1.3.8
3、jszip
介绍:jszip是⼀个⽤于创建、读取和编辑.zip⽂件的JavaScript库,且API的使⽤也很简单。
安装⽅法:cnpm i jszip@^2.6.1
4、jszip-utils
介绍:jszip-utils是与jszip⼀起使⽤的跨浏览器的⼯具库
安装⽅法:cnpm i jszip-utils@^0.0.2
⼆、创建word模版
介绍:根据⾃⼰的业务需求创建需要导出的word模版,变量数据使⽤{变量名}代替,表格内容数据需要使⽤{#参数名}开始{/参数名}结尾,具体如下图:
注意点:1.模板⽂件使⽤vue-cli2的时候,放在static⽬录下。使⽤vue-cli3的时候,放在public⽬录下。
2.⽂件须以docx结尾。
不然可能出现的问题:提⽰Uncaught Error: Corrupted zip: missing 7124 bytes.
vue-cli3⽰例位置如图:
三、html代码编写
定义下载事件downloadprice
<div class="download” @click="downloadprice">下载价格表</div>
四、script代码编写
1.使⽤的页⾯中导⼊需要的插件:
import Docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
2.定义接⼝数据(这⾥为定义好的数据,正常情况下通过接⼝获取需要在word⽂档上展⽰的数据):data() {
return {
// 导出价格表全部信息
exportPriceObj: {
actualPayFee: '179.55',
deliveryFee: '0.00',
discountActualFee: '179.55',
discountFee: '9.45',
discountRatio: '95',
nickName: '张三',
retailTotalFee: '0.00',
totalFee: '189.00',
},
// 导出价格表商品信息
exportPriceListOne: [
{
productColor: '⽩⾊',
productName: '0909测试商品',
productNo: 1,
productSize: '4XL(58)',
productSkuId: 'teydnkn',
sellingPrice: '10.00',
},
{
productColor: '⽩⾊',
productName: '1955测试商品',
productNo: 2,
productSize: 'XL(52)',
productSkuId: 'teydoja',
sellingPrice: '40.00',
}
],
}
}
3.下载word⽂档点击事件⽅法:
// 下载价格表
downloadprice() {
let _this = this;
// 判断有⽆附加商品来选择word模版
// 读取并获得模板⽂件的⼆进制内容
console.log('-----', content);
// input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
// 抛出异常
if (error) {
throw error;
}
/
/ 创建⼀个JSZip实例,内容为模板的内容
let zip = new JSZip(content);
console.log('+++++', zip);
// 创建并加载docxtemplater实例对象
let doc = new Docxtemplater();
console.log('/////', doc);
doc.loadZip(zip);
console.log('=====', doc);
// 设置模板变量的值
doc.setData({
// 导出价格表全部信息
.
.._portPriceObj,
// 导出价格表商品信息
tableone: _portPriceListOne,
});
try {
// ⽤模板变量的值替换所有模板变量
} catch (error) {
// 抛出异常
let e = {
message: ssage,
name: error.name,
stack: error.stack,
properties: error.properties
};
console.log(JSON.stringify({ error: e }));
throw error;
}
// ⽣成⼀个代表docxtemplater对象的zip⽂件(不是⼀个真实的⽂件,⽽是在内存中的表⽰)
let out = Zip().generate({
type: 'blob',
mimeType:
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
// 将⽬标⽂件对象保存为⽬标类型的⽂件,并命名
saveAs(out, _portPriceObj.nickName + '的价格表.docx');
});
},
4.点击下载后可能会出现的问题:
⼀、提⽰Uncaught Error: Corrupted zip: missing 7124 bytes.
错误⽅法如图:
可能产⽣的原因是:1.模版⽂件word放置的位置获取不到;
2.word⽂档格式出现错误;
解决⽅法:1.模板⽂件使⽤vue-cli2的时候,放在static⽬录下。使⽤vue-cli3的时候,放在public⽬录下。
2.⽂件须以docx结尾。
正确⽅法如图:
⼆、提⽰Uncaught Error: Can't find end of central directory : is this a zip file ?
错误⽅法如图:
前端大文件上传解决方案
可能产⽣的原因是:1.你项⽬⾥⾯引⽤了mockjs⽂件,它的原理是重写了XMLHttpRequest,导致你上报插件不到对应的⽅法;
解决⽅法:上线时把项⽬中引⼊的mock注释掉,// import '@/mock';
原理分析:mockjs是⼀个模拟后台接⼝的JS库,它的原理是重写了XMLHttpRequest,它可以在接⼝没出来时⾮常⽅便的模拟数据,上线之后不引⽤它即可。⼀般上报插件中会使⽤原⽣XMLHttpRequest,⽽原⽣XMLHttpRequest已被mockjs覆盖不到相应的⽅法,所以会出错。除了mockjs之外,zonejs、oboejs、fetchjs也有⾃⼰的的XMLHttpRequest库,请慎⽤。
正确⽅法如图:
三、提⽰ End of data reached (data length = 0, asked index = 4). Corrupted zip ?
错误⽅法如图:
可能产⽣的原因:1.你项⽬上传上去的word⽂件为空⽂件;
解决⽅法:1.请检查你上传到服务器的⽂件⼤⼩是否正确,如果字节为空或者字节⼤⼩不对,请替换⼀个正确的word⽂件上去;
四、其他问题等
请检查你下载⽂件⽅法是否存在缓存,查询⽅法如下:
304代表有缓存
200代表没有
解决⽅法:
在引⽤⽂件时在⽂件后⾯添加⼀个随机数
五、导出结果
导出结果如图:
有问题欢迎留⾔,带上问题和代码截图,看到后第⼀时间回复帮忙解答,谢谢!

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