【JS】前端处理后端返回的流（转为word文档或excel）

前提：后端返回的流是word格式的，是一堆乱码，前端需要对流处理并导出为word格式

实现：主要是借助于new Blob和a标签的download和href属性

具体代码实现如下：

按项目需求：要导出某个用户的空白试卷和已答试卷

// 导出空白卷的方法，需要传进来一个type
// 导出已答卷的方法其实，一样，只不过调的后端接口不同
exportTestEmpty(type){
      //  这个判断是必须选中一个用户，然后才能进行导出
      if(this.selectedRowKeys.length > 0){
        // obj这个对象是后端接口所需的参数
        let obj = {
          type,
          wwPersonId: this.selectedRowKeys[0]
        }
        // 这里一定得加上'blob'，表示：responseType:'blob' 否则导出就乱码了
        // 这里的getAction方法是封装好的
        getAction(this.url.exportEmpty, obj, 'blob').then(res=>{
            // res 就是后端返回的流
            // application/msword 表示要处理为word格式
            // let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=UTF-8'}); 即可转为excel格式
            let blob = new Blob([res], {type: 'application/msword;charset=UTF-8'});
            let objectUrl = URL.createObjectURL(blob)
            let link = document.createElement("a");
            link.href = objectUrl;
            if(type == "1"){
              // 设置a标签的download属性并赋值，赋的值就是导出的word的文件名
              link.download = this.selectionRows[0].name + "的厂级考试"
            }else if(type == "2"){
              link.download = this.selectionRows[0].name + "的部门考试"
            }if(type == "3"){
              link.download = this.selectionRows[0].name + "的班组考试"
            }
            document.body.appendChild(link);
            link.click();
            //释放内存
            window.URL.revokeObjectURL(link.href);  
        })
      }else {
          this.$message.warning('请选择一名人员进行导出')
      }
    }

封装好的getAction方法：

export function getAction(url, parameter,responseType) {
  console.log(url)
  let sign = signMd5Utils.getSign(url, parameter)
  //将签名和时间戳，添加在请求接口 Header
  let signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getDateTimeToString() }

  return axios({
    url: url,
    method: 'get',
    params: parameter,
    headers: signHeader,
    // 在将流转为文件进行下载时，需要传个值：'blob'，否则会乱码
    responseType
  })
}