文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue导出excel文件流中文乱码如何解决

2023-06-30 18:16

关注

本篇内容介绍了“vue导出excel文件流中文乱码如何解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

导出excel文件流中文乱码

vue导出excel文件流中文乱码如何解决

解决此方法很多网上的差不多都可以。一下提供简单的方法

 loads(){  let data={  userWord:this.dataList.userWord,  examId:this.$route.query.id,  exportType:this.active,  }api.exportUserResult(data).then((res) => {const blob = new Blob([res.data]);                     const fileName = '考试成绩.xls';                    const linkNode = document.createElement('a');                    linkNode.download = fileName; //a标签的download属性规定下载文件的名称                    linkNode.style.display = 'none';                    linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL                    document.body.appendChild(linkNode);                    linkNode.click();  //模拟在按钮上的一次鼠标单击                    URL.revokeObjectURL(linkNode.href); // 释放URL 对象                    document.body.removeChild(linkNode);      });  },

注意:

vue导出excel文件流中文乱码如何解决

填写

另住拦截器,因为判断result,没在正确里返回,所以我直接返回

vue导出excel文件流中文乱码如何解决

导出excel乱码(锟斤拷唷?锟?;锟斤拷)

vue导出excel文件流中文乱码如何解决

我这个是 post请求乱码了 ,如果是get,就直接window.open(url,'_blank')就可以了

“锟斤拷唷?锟?;锟斤拷”这种乱码信息导致的原因是:整个数据流的字符集 GBK=>UTF-8=>GBK导致的。

前端代码:

     axios({        method: "post",        url: url,        data: params,        headers: {          // ... 接口需要的请求头        },        responseType: "blob"      }).then(response => {        const blob =  new Blob([res.data],{type: 'application/vnd.ms-excel'});        const fileName = res.headers["content-disposition"].split("=")[1]; //接口响应头定义的文件名        downloadFile(blob, fileName);      });
//import { Message } from "element-ui"; export function downloadFile(data, fileName) {  let url = "";  let isBlob = false;  const errMsg = "下载出错,文件数据无法识别!";   if (data instanceof Blob) {    isBlob = true;    url = window.URL.createObjectURL(data);  } else if (typeof data == "string") {    // base64编码    url = data;  } else {    Message.error(errMsg);    return;  }   if ("download" in document.createElement("a")) {    // 非IE下载    const tmpLink = document.createElement("a");    tmpLink.download = fileName || "";    tmpLink.style.display = "none";    tmpLink.href = url;    document.body.appendChild(tmpLink);    tmpLink.click();    window.URL.revokeObjectURL(tmpLink.href); // 释放URL 对象    document.body.removeChild(tmpLink);  } else {    // IE10+下载    if (isBlob) {      window.navigator.msSaveBlob(data, fileName);    } else {      //Message.error(errMsg);      console.log(errMsg);      return;    }  }}

感觉完美 但是结果下载下来的如一开始截图的乱码,其实代码没有问题,问题在于前端项目启用了mock.js,把所有 import 或 require   @/mock  的地方注释调就可以了

“vue导出excel文件流中文乱码如何解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯