解决前端导出excel文件，打开为乱码

前端开发中，导入和导出文件是比较常见的业务场景，楼主在初次接触此类问题时，也在此卡了几天，好在问题最终也得以解决，废话不多说了直接上代码：

    <el-upload:on-error="uploadError":headers="headers":accept="accept"class="uploadContent":action="uploadurl":on-remove="handleRemove":before-remove="beforeRemove"multiple:limit="limit"ref="uploadComponent":on-exceed="handleExceed":auto-upload="autoupload":file-list="fileList":data="uploadData":on-change="fileStateChange":http-request="handleupload"><span v-if="showtip">添加附件</span><el-button class="btnColor2" size="small" type="primary">添加附件 </el-button></el-upload>

代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：

1.组件自带的上传方法，只需要给其设置action地址参数，即可完成上传，但是其弊端为无法在改组件的基础上设置后端相应的数据格式：responseType，或者是拿到后端响应的二进制流后将其转换为blob对象并为其设置responseType：'blob'无效的问题，从而导致导出的excl文件打开后为乱码的问题。

2.:http-request自定义上传方法。改方法也是本次主要的上传方法，此处使用自定义方法上传的有点便是可自定义上传接口的参数，上代码：

定义接口：

// 文件上传
export const userNameListUpload = (data, uploadurl) => axios.request({url: uploadurl,baseURL,data,method: 'post',contentType: 'application/json;charset=UTF-8',responseType: 'blob',
});

上述代码引用接口：userNameListUpload，在该接口的axios部分需要设置一下参数：

contentType: 'application/json;charset=UTF-8',
responseType: 'blob',

其含义是指定后端相应的数据类型为blob类型。

:http-request自定义上传函数：

    async handleupload(option) {const formData = new FormData();if (option.data) {Object.keys(option.data).forEach((key) => {formData.append(key, option.data[key]);});}formData.append(option.filename, option.file, option.file.name);const loading = this.$loading({ text: '上传中...' });const res = await userNameListUpload(formData, this.uploadurl);loading.close();if (res) {this.$emit('uploadComplete', res); // 展示导入结果}},

前端在拿到后盾响应的数据后，只需将其转换为Blob对象，然后再以a标签的形式进行访问即可，上代码：

    // 展示失败明细falidDetail() {// 有Success的直接展示if (this.sendResponse.Success) {if (this.sendResponse.Success) {this.$message.success(this.sendResponse.Msg);} else {this.$message.error(this.sendResponse.Msg);}} else {//=========================进行流转换为excel表格的操作，并导出excel===============// 没有Success的直接展示ecxel表格const blob = new Blob([this.sendResponse]);const link = document.createElement('a');link.style.display = 'none';// setAttribute() 方法添加指定的属性，并为其赋指定的值。link.setAttribute('download', '错误信息.xlsx');link.href = window.URL.createObjectURL(blob);document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(blob);}},

进行了这些设置后，即可正常导出excel文件了。

小伙伴们，加油哦！

解决前端导出excel文件，打开为乱码相关推荐

解决poi导出Excel文件打开警告（一）
项目中需要导出Excel报表,使用poi导出Excel文件,添加依赖 <dependency><groupId>org.apache.poi</groupId>&l ...
关于asp.net C# 导出Excel文件打开Excel文件格式与扩展名指定格式不一致的解决办法...
-----转载:http://blog.csdn.net/sgear/article/details/7663502 关于asp.net C# 导出Excel文件打开Excel文件格式与扩展名指定格 ...
解决EasyPoi导出Excel文件后提示无法打开文件的问题
本来项目中导出Excel文件借助EasyPoi用得好好的,今天测试时发现对要导出的数据做了筛选后,导出的Excel文件打开就会弹出"无法打开文件"的提示,如图所示: 经过网上寻找答 ...
C# 导出Excel文件打开Excel文件格式与扩展名指定格式不一致。
方法一(不提倡) 产生此问题的原因: 我写入Excel的不是正常的Excel格式,说白了就是我用Response.WriteFile("k:\\StudentMarks.xls") ...
java导出excel文件内容中文乱码解决
记录一个excel导出中发现的问题. 最近使用了EasyExcel这个工具类进行excel的导出,这个类很方便,配合注解和封装的方法,可以很容易的对需要导出的excel或者已有的excel进行行列或者 ...
vue-实战记录-前端导出excel文件、pdf文件、word文件
一.excel文件导出 1.引入npm包 npm install --save table-xlsx @pengchen/xlsx 第三方包文档:https://pengchen96.github.i ...
easypoi导出excel不设置样式_解决EasyPoi导出excel文件后打开提示格式错误的问题
excel文件下载成功后打开文件遇到错误之前的下载代码: private static void downLoadExcel(String fileName, HttpServletResponse ...
解决同花顺导出Excel文件无法读取的问题xlrd.biffh.XLRDError: Unsupported format, or corrupt file: Expected BOF record；
同花顺问财有个数据数据导出的功能,可以导出为Excel 格式,但是用Python直接读取的时候会报错,如下图: file_name = datetime.now().strftime("%Y ...
前端导出excel文件带样式_vue前端使用xlsx导出数据到excel中--最简单的方式
最新项目中需要将页面数据导出到excel中,首先想到的就是度娘,得到的结果都是千篇一律,答案都是你复制我我复制你的,虽然能解决问题,但是这个过程也太复杂. 既然无法改变,那就只好插手你的生活了. 废话 ...

解决前端导出excel文件，打开为乱码

解决前端导出excel文件，打开为乱码相关推荐

最新文章

热门文章