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

实现:主要是借助于new Bloba标签的downloadhref属性

具体代码实现如下:

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

// 导出空白卷的方法,需要传进来一个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
  })
}
Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐