vue 前后端下载

1.使用场景：前后端分离，后端生成execl六文件，前端直接调用接口下载excel

/src/api/usr
export function exportExcel(path,params) {
  return request({
    url: path,
    method:'get',
    params:params,
    responseType: 'arraybuffer'
  })
}
 
 
//使用的地方
async handleDown () {
      this.downLoading = true
      try{
        const res = await exportExcel('/service/reconciliation/downloadList',this.listQuery)
        const blob = new Blob([res],{
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        downloadElement.download = '账单明细.xlsx'
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
        setTimeout(() => {
          this.downLoading = false
        }, 500)
      }catch(err){
        this.downLoading = false
      }
    },

2.execl直接在前端生成，样式可以根据实际内容调整，本质是一个html，转换成execl

优点：样式可以随意切换，在前端直接生成减少网络传输压力

缺点：用word打开的时候会有一个提示，文档格式不匹配，但不影响正常的打开

exportxsl() {
  var datanum = this.exceldata.length - 1;
  // var startTime = this.timestampToTime(this.exceldata[0].createTime);
  // var endTime = this.timestampToTime(this.exceldata[datanum].createTime);
  var str =
    "<tr style='font-size:15px'><td colspan='6'  style='font-size:14px;background-color:#ddd;padding-top:10px;padding-bottom:10px;height:100px'> <strong>提示：</strong>      总数：" +
    this.exceldata.length +
    "条</td></tr>" +
    '<tr>'+
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">账号</td>' +
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">产品</td>' +
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">单价</td>' +
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">实际费用</td>' +
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">类型</td>' +
    '<td style="border: 0.5pt solid #000;background-color:#ddd;font-size:20px">订购时间</td>' +
    ' </tr>';
  var data = this.exceldata; //从接口中获取的数据
  for (let i = 0; i < data.length; i++) {
    let account =  data[i].account ? data[i].account:"--"
    str += "<tr>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' + account + "</td>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' +
      data[i].productName +
      "</td>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' +
      data[i].receivable +
      "</td>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' +
      data[i].receipt +
      "</td>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' +
      this.typeToChange(data[i].type) +
      "</td>";
    str +=
      '<td  style="border: 0.5pt solid #000;">' +
      this.timestampToTime(data[i].createTime) +
      "</td>";
    str += "</tr>";
  }
  function base64(template) {
    return window.btoa(unescape(encodeURIComponent(template)));
  }
  var filename = "个人账单信息";
  //Worksheet名
  var worksheet = "个人帐单信息";
  // let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
 
  var uri = "data:application/vnd.ms-excel;base64,";
  //下载的表格模板数据
  var template = `<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">
  <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
    <x:Name>${worksheet}</x:Name>
    <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
    </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><style type="text/css">table{border: 0.5pt solid #000;background-cpor:#dddborder-collapse: collapse;}table td{border-top:0pt;font-size:16px } </style>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><table>${str}</table></body></html>`;
 
  var a = document.createElement("a");
  a.download = filename;
  a.href = uri + base64(template);
  a.click();
  // // 下载模板
  // window.location.href = uri + base64(template)
}