vue项目中导入导出功能总结

导出时

重写post请求方法中，responseType:‘blob’,注意返回的是res还是res.data

接口封装

export const POSTBLOB = (url, params) => {
  return axios({
    method:'post',  
    url:`${url}`,
    data:params,
    responseType:'blob'
  }).then(res => res.data)
};

返回的结果为res.data
在调用接口转化为blob对象时

调用接口

api_zklt.exportToZip(obj).then(res => {
              if(res){
                  let blob = new Blob([res]);//这里为res,如果封装的post请求返回的为res,则这里为res.data
                  let href = URL.createObjectURL(blob)
                //   let start = res.headers['content-disposition'].indexOf('filename')
                //   let filename = res.headers['content-disposition'].slice(start + 10, -1) //'='号起始位置
                //   let cnName = decodeURIComponent(filename)
                  let a = document.createElement('a')
                  a.download = `统计报告.zip`;
                  a.href = href
                  document.body.appendChild(a)
                  a.click()
                  document.body.removeChild(a)
              }else {
                  console.log('数据类型非Blob!')
              }
          }).catch(err => {
              console.log(err.message);
          })

导入时

如果发送的数据需要为表单形式时，需要添加
headers: {
‘Content-Type’: ‘multipart/form-data’//这个是关键的一句
},

接口封装

export const POSTmultipart_ORI = (url, params) => {
  return axios({
    method: 'post',
    url: `${url}`,
    data: params,
    enctype: 'multipart/form-data',
    headers: {
      'Content-Type': 'multipart/form-data'//这个是关键的一句
    },
    responseType:'blob',
    // withCredentials:true
  }).then(res => res)
};

调用接口

注意 因为这里对响应数据的处理要直接使用res.headers，所以封装的请求接口中只能返回res
decodeURIComponent(res.headers.msg);//使用该方法解码乱码的中文字符

//注意可以使用element-ui中封装的Upload上传file
importUser(file) {
      let that = this;
      //上传的文件转换为表单格式
      let formData = new FormData();
      formData.append('file',file.raw);//注意file.raw
      API.testExcel(formData).then(res => {
      //注意 因为这里要直接使用res.headers，所以封装的请求接口中只能返回res
        console.log(res.headers);
        let filename = '';
        let msg = '';
        if(res.headers.code){//code 1 有excel下载
          this.flag = true;
          let contentDisposition = res.headers['content-disposition'];
          if(contentDisposition){
            filename = contentDisposition.split('=')[1];
          }
          msg = decodeURIComponent(res.headers.msg);//使用该方法解码乱码的中文字符
        }else{
          this.flag = false;
        }
        this.openMessage(res,filename);
      }).catch(err => {
        this.$message.warning(err.message);
      })
    },
    openMessage(res,filename){
      let that = this;
      this.$confirm('导入的excel有误', '导入', {
          confirmButtonText: '下载',
          cancelButtonText: '取消',
          type: 'warning',
          showConfirmButton:this.flag,
        }).then(() => {
        //注意 这里就是同样的方法下载接口中返回的二进制数据
          let blob = new Blob([res.data]);//注意res.data，因为封装的接口中返回的数据是res
          let href = URL.createObjectURL(blob)
          let a = document.createElement('a')
          a.download = filename;
          a.href = href
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)；
        }).catch(() => {         
        });
    },