随笔- 245 文章- 0 评论- 8 阅读- 27万

vue中请求后端接口导出excel数据

请求后端接口

一、点击链接。

不需要token，也不需要传给后台数据时

（1）window.location.href = ‘url’ 
（2）<a href='url' download=''></a>

二、需要携带请求头token

这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过blob去解析，再动态创建a标签

（1）

import axios from "axios";

export default {
  data() {
    return {
      btnLoading: false
    };
  },
  methods: {
    // responseType 响应类型
    exportFile() {
      this.btnLoading = true;
      axios({
        method: 'get',
        url: '/api',
        headers: {
          token: '79faf82271944fe38c4f1d99be71bc9c'
        },
        responseType: "blob"
      })
        .then(res => {
          this.btnLoading = false;
          if (res.data.type) {
            // 文件下载
            const blob = new Blob([res.data], {
              type: "application/vnd.ms-excel"
            });
            let link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.setAttribute('download', '导出文件.xlsx');
            link.click();
            link = null;
            this.$message.success('导出成功');
          } else {
            // 返回json
            this.$message.warning(res.data.msg);
          }
        })
        .catch(err => {
          this.btnLoading = false;
          this.$message.error("下载失败");
        });
    }
  }
};

（3）解析后台返回的文件流（通过param传数据给后台）

这种方式就是后台将要导出的文件以文件流的方式返回给前端，前端通过blob去解析，再动态创建a标签

var param = {
  queryString:this.orderQuerySearch,
  canal:this.orderType
};
var url = '/order/excel'
this.$axios.post(url, param, {responseType: 'arraybuffer'}).then(res => {
  let content = res.data; // 文件流
  let blob = new Blob([content],{type: 'application/octet-stream'});
  let fileName = 'filename.xls';
 // 如果后端返回文件名
 // let contentDisposition = res.headers['content-disposition'];
 // let fileName = decodeURI(contentDisposition.split('=')[1]);
　　if ('download' in document.createElement('a')) {  // 非IE下载
   　　let link = document.createElement('a');
   　　link.download = fileName;
   　　link.style.display = 'none';
  　　 link.href = URL.createObjectURL(blob);
  　　 document.body.appendChild(link);
   　　link.click();
  　　 URL.revokeObjectURL(link.href) ; // 释放URL 对象
  　　 document.body.removeChild(link);
　　} else {  // IE10+下载
　　   navigator.msSaveBlob(blob,fileName);
　　}
})

接收数据前端实现

这种方式就是后台只需提供对应的数据即可，前端动态生成表格数据，再格式化。

let excel = '<table>';
// 生成表头
let row = '<tr>' +
  '<td>标题1</td>' +
  '<td>标题2</td>' +
  '<td>标题3</td>' +
  '</tr>';
excel += row + '</tr>';
// 循环生成表身
for(let i = 0 ; i < this.excelData.length ; i++ ){
  excel += '<tr>';
  for(let item in this.excelData[i]){
    //增加\t为了不让表格显示科学计数法或者其他格式
    if (!this.excelData[i][item]) {
      this.excelData[i][item] = '';
    }
    excel +=`<td>${ this.excelData[i][item] + '\t'}</td>`;
  }
  excel +='</tr>';
}
excel += '</table>';
//下载的表格模板数据
var excelFile = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
  'xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel"';
excelFile += ' charset="UTF-8">';
excelFile += '<head>';
excelFile += '<!--[if gte mso 9]>';
excelFile += '<xml>';
excelFile += '<x:ExcelWorkbook>';
excelFile += '<x:ExcelWorksheets>';
excelFile += '<x:ExcelWorksheet>';
excelFile += '<x:Name>';
excelFile += 'sheet';
excelFile += '</x:Name>';
excelFile += '<x:WorksheetOptions>';
excelFile += '<x:DisplayGridlines/>';
excelFile += '</x:WorksheetOptions>';
excelFile += '</x:ExcelWorksheet>';
excelFile += '</x:ExcelWorksheets>';
excelFile += '</x:ExcelWorkbook>';
excelFile += '</xml>';
excelFile += '<![endif]-->';
excelFile += '</head>';
excelFile += '<body>';
excelFile += excel;
excelFile += '</body>';
excelFile += '</html>';
//下载模板
let uri = 'data:application/vnd.ms-excelcharset=utf-8,' + encodeURIComponent(excelFile);
let link = document.createElement('a');
link.href = uri;
link.style = 'visibility:hidden';
let myDate = new Date();
let time = myDate.toLocaleDateString().split('/').join('-');
link.download = 'fileName' + time + '.xls';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);