解决前端导出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文件了。

小伙伴们，加油哦！