vue导出excel文件流中文乱码问题及解决

 更新时间:2022年06月02日 11:30:21   作者:Thekingyu  
这篇文章主要介绍了vue导出excel文件流中文乱码问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

导出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);
      });
	  },

注意:

填写

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

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

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

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

2. 前端代码:

     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";
 
/**
 * 文件下载, 对于下载链接可直接用 window.open(url, "_blank");
 * @param {*} data 二进制数据或base64编码 Blob、String
 * @param {*} fileName 下载的文件命名,可带扩展名,跨域下无效
 */
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;
    }
  }
}

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue2 对全局自定义指令一次性进行注册的方法

    vue2 对全局自定义指令一次性进行注册的方法

    这篇文章主要介绍了vue2 对全局自定义指令一次性进行注册,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • 基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置,根据当前时间初始化位置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 详解如何使用webpack在vue项目中写jsx语法

    详解如何使用webpack在vue项目中写jsx语法

    本篇文章主要介绍了详解如何使用webpack在vue项目中写jsx语法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue中el-message的封装使用

    vue中el-message的封装使用

    本文主要介绍了vue中el-message的封装使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 详解vue-cli3多页应用改造

    详解vue-cli3多页应用改造

    这篇文章主要介绍了详解vue-cli3多页应用改造,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue在html标签{{}}中调用函数的方法总结及对比

    vue在html标签{{}}中调用函数的方法总结及对比

    这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • Vue3在jsx下父子组件实现使用插槽方式

    Vue3在jsx下父子组件实现使用插槽方式

    这篇文章主要介绍了Vue3在jsx下父子组件实现使用插槽方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解vue几种主动刷新的方法总结

    详解vue几种主动刷新的方法总结

    这篇文章主要介绍了详解vue几种主动刷新的方法总结,文中详细的介绍了几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue使用csp的简单示例

    vue使用csp的简单示例

    Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue使用csp的相关资料,需要的朋友可以参考下
    2022-08-08
  • 拿来就用vue-gird-layout组件封装示例

    拿来就用vue-gird-layout组件封装示例

    这篇文章主要介绍了vue-gird-layout组件封装示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论