方法1：Blob+a标签

Blob是一个构造函数，创建一个Blob对象的操作为：new Blob([data],{type})

其中data为文件流，type为数据的MIME类型

MIME类型包含文本、图像、音频、视频等。

此处扩展名为.xls MIME类型为application/vnd.ms-excel，具体可见=》www.w3school.com.cn/media/media…

exportXsl(){
    var html = JSON.stringify(res.data.data)//1.假设调用接口的话
     //2.使用outerHTML属性获取整个table元素的HTML代码（显性表格）
    var html = document.getElementsByTagName("table")[0].outerHTML;
    //实例化一个Blob对象
    let blob = new Blob([html],{type:"application/vnd.ms-excel"}),
      link = document.createElement("a"),
      //创建一个新的URL对象
      href = window.URL.createObjectURL(blob);
    link.href = href;
    //模拟触发点击链接
    document.body.appendChild(link);
    link.click();
    //移除
    document.body.removeChild(link);
 
}

方法2：利用插件

给表格添加样式，这里利用xlsx-populate插件

npm install xlsx-populate

可见以下示例代码

逻辑：用xlsx-populate插件生成表格并且设置需要的样式，用xlsx将sheet添加到工作薄，然后调用方法将工作部转化成blob对象，最后使用blob+a标签方法生成链接模拟点击下载。

workbook转化成blob对象：

function workbook2blob(workbook) {
          // 生成excel的配置项
          var wopts = {
            // 要生成的文件类型
            bookType: "xlsx",
            // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            bookSST: false,
            type: "binary"
          };
          var wbout = XLSX.write(workbook, wopts);
          // 将字符串转ArrayBuffer
          function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
            return buf;
          }
          var blob = new Blob([s2ab(wbout)], {
            type: "application/octet-stream"
          });
          return blob;
        }

import XlsxPopulate from 'xlsx-populate'
XlsxPopulate.fromBlankAsync().then(function(workbook){
  //生成表格（包含样式和数据）
  var sheet = workbook.sheet(0);
  //设置A列的样式
  sheet.column("A").width(35).style({
    wrapText:true
  });
  sheet.column("B").width(18).style({
    wrapText:true,
    numberFormat:"0.00"//设置数字精度为小数点后两位
  });
  sheet.cell("A2").value("this is neat!");//A2单元格添加文本
  sheet.cell("A1").value([1,2,3]).style({
    leftBorder:"thick",
    rightBorder:"thick",//设置左右边框
  });
  const r = sheet.range("B1:D3");//在B1~D3内设置
  r.value(5);//全填入5
  const r2 = sheet.range("A4:C6");
  r2.value([
    [1,2,3],
    [4,5,6],
    [7,8,9]
  ])
  //样式添加完毕,返回结果
  var wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, sheet, "table");
  const workbookBlob = workbook2blob(wb);
  var link = document.createElement("a"),
      //创建一个新的URL对象
    href = window.URL.createObjectURL(workbookBlob);
    link.href = href;
    //模拟触发点击链接
    document.body.appendChild(link);
    link.click();
    //移除
    document.body.removeChild(link);
  
  
})
  
})

js-xlsx用法：

npm install xlsx

import XLSX from "xlsx"

handleExport(){
  //创建表1、2......
  const sheetData = data.map(item =>({
    //设置表头和对应项的值
    'ID':item.id,
    'NAME':item.name,
    'TIME':item.time,
  }));
  const sheetData2 = ....;

  const sheet = XLSX.utils.json_to_sheet(sheetData);
  const sheet2 = XLSX.utils.json_to_sheet(sheetData2);

  const wb = XLSX.utils.book_new();//创建workbook
  //将两个表放入工作簿中生成表格
  XLSX.utils.book_append_sheet(wb,sheet,'列表1')
   XLSX.utils.book_append_sheet(wb,sheet2,'列表2')

  //生成blob对象，见上
  const workbookBlob = workbook2blob(wb)
   var link = document.createElement("a"),
      //创建一个新的URL对象
      href = window.URL.createObjectURL(workbookBlob);
    link.href = href;
    //模拟触发点击链接
    document.body.appendChild(link);
    link.click();
    //移除
    document.body.removeChild(link);
}

导出excel

方法1：Blob+a标签

方法2：利用插件