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)
    }

3.还有一种使用官方的插件的execl 在前端生成，vue-element-admin 上有  我就不再重复叙述了。　　

　　

 

posted on 2021-07-06 10:54  朝颜陌  阅读(190)  评论(0)    收藏  举报

导航