其他分享
首页 > 其他分享> > vue中后端做Excel导出功能返回数据流前端如何做处理

vue中后端做Excel导出功能返回数据流前端如何做处理

作者:互联网

方法一:

exportData() {
        exportDevelopTaskProgressListInfo({
          ...this.where,
          startTime: this.startDate,
          endTime: this.endDate
        });
      },

  api接口里:

export async function exportDevelopTaskProgressListInfo(params) {
axios({
      url: '/Statistics/exportDevelopTaskProgressListInfo',
      method: 'post',
      data: params,
      responseType: 'blob'
    }).then((res) => {
      if (res.data.size != 0) {
        const filename = '报表';
        let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        if (window.navigator && window.navigator.msSaveBlob) {
          window.navigator.msSaveBlob(blob, filename);
        } else {
          //其他浏览器
          let link = document.createElement('a'); // 创建a标签
          link.style.display = 'none';
          let objectUrl = URL.createObjectURL(blob);
          link.href = objectUrl;
          link.setAttribute('download', filename);
          link.click();
          URL.revokeObjectURL(objectUrl);
        }
      } else {
        res.data.message.error('暂无下载内容');
      }
    });

}

  方法二:

// 导出数据
      exportData() {
        exportDevelopTaskProgressListInfo({
          ...this.where,
          startTime: this.startDate,
          endTime: this.endDate,
          current: this.page,
          pageSize: this.limit
        }).then((res) => {
          console.log(res);
          if (res.data.size != 0) {
            const filename = '报表';
            let blob = new Blob([res.data], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            });
            if (window.navigator && window.navigator.msSaveBlob) {
              window.navigator.msSaveBlob(blob, filename);
            } else {
              //其他浏览器
              let link = document.createElement('a'); // 创建a标签
              link.style.display = 'none';
              let objectUrl = URL.createObjectURL(blob);
              link.href = objectUrl;
              link.setAttribute('download', filename);
              link.click();
              URL.revokeObjectURL(objectUrl);
            }
          } else {
            res.data.message.error('暂无下载内容');
          }
        });
      },

  api接口里:

export async function exportDevelopTaskProgressListInfo(params) {
  return await axios({
    url:"/Statistics/exportDevelopTaskProgressListInfo",
    loading:true,
    method: "post",
    responseType: "blob",
    header: {'Content-Type': ' application/octet-stream'},//
    rest:true,
    data:params
})

  

标签:vue,res,中后,Excel,window,link,blob,objectUrl,data
来源: https://www.cnblogs.com/Ao-min/p/16407519.html