Vue2 导出Excel + 解决乱码问题 —— axios
请求用的axios（类似ajax问题），找了很多方法，都下载不了文件。
以下是解决方法）：
1.接口返回的流：
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
2、请求头和返回头：
方法一、方法二：
2.下载流文件的代码
方法一：是用了插件 https://github.com/kennethjiang/js-file-download
方法二：是用了 blob
不管哪种方法，记得设置 responseType ！！！！！
附上代码：
- // 导出Excel
- exportBill: function () {
- let url_post = Vue.prototype.api.apiList.EXPORT_BILL; //请求地址
- let params_post = { //参数
- orderStartDate: this.timepickerDateFormat(this.rangeTime[0]) || this.rangeTime[0] || '',
- orderEndDate: this.timepickerDateFormat(this.rangeTime[1]) || this.rangeTime[1] || '',
- prodCode: this.prodId,
- promoteFlag: this.promotionSiteId,
- policyStatusList: this.tableBillStateCheckedData,
- };
- Vue.axios.post(url_post, params_post, {
- responseType: 'arraybuffer'
- }).then( (res) => {
- let fileName = res.headers['content-disposition'].match(/fushun(\S*)xls/)[0];
- fileDownload(res.data, fileName); //如果用方法一 ，这里需要安装 npm install js-file-download --save ,然后引用 var fileDownload = require('js-file-download')，使用详情见github;
- // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
- // let objectUrl = URL.createObjectURL(blob);
- // window.location.href = objectUrl;
- }).catch( function (res) {});
- },
- 1
- 1
方法三（附加）：
1、接口要求： post方法、入参为json格式、出参文件流
* 2、axios：设置返回数据格式为 blob 或者 arraybuffer （ 注意 ）
- axios({ // 用axios发送post请求
- method: 'post',
- url: ' /serviceTime/exportData', // 请求地址
- data: form, // 参数
- responseType: 'blob', // 表明返回服务器返回的数据类型
- headers: {
- 'Content-Type': 'application/json'
- }
- }).then( res => { // 处理返回的文件流
- const blob = new Blob([res.data]);//new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
- const fileName = '统计.xlsx';//下载文件名称
- const elink = document.createElement('a');
- elink.download = fileName;
- elink.style.display = 'none';
- elink.href = URL.createObjectURL(blob);
- document.body.appendChild(elink);
- elink.click();
- URL.revokeObjectURL(elink.href); // 释放URL 对象
- document.body.removeChild(elink);
- })
- 1
（ 上面代码中少取一层的导出文件）：
<script>
(function(){
function setArticleH(btnReadmore,posi){
var winH = $(window).height();
var articleBox = $("div.article_content");
var artH = articleBox.height();
if(artH > winH*posi){
articleBox.css({
'height':winH*posi+'px',
'overflow':'hidden'
})
btnReadmore.click(function(){
articleBox.removeAttr("style");
$(this).parent().remove();
})
}else{
btnReadmore.parent().remove();
}
}
var btnReadmore = $("#btn-readmore");
if(btnReadmore.length>0){
if(currentUserName){
setArticleH(btnReadmore,3);
}else{
setArticleH(btnReadmore,1.2);
}
}
})()
</script>
</article>
更多精彩
