vue 两种方式实现excel导出功能

<el-button type="primary" size="small" @click="exportExcel">导出Excel</el-button>

第一种方式：使用前端插件导出

安装 npm install xlsx --save

注册 xlsx.js，代码贴上

import XLSX from 'xlsx'
/**
 * @param dataList 表格数据内容  array
 * @param fileName 文件标题。必须以 .xlsx结尾
 */
export const downloadXlsx = (dataList, fileName) => {
    const stringToBuff = str => {
        let buf = new ArrayBuffer(str.length)
        let view = new Uint8Array(buf)
        for (let i = 0; i !== str.length; ++i) {
            view[i] = str.charCodeAt(i) & 0xff
        }
        return buf
    };
    // 创建表格
    let workbook = XLSX.utils.book_new();
    let worksheet = XLSX.utils.aoa_to_sheet(dataList);
    XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet1');

    // 创建二进制对象写入转换好的字节流
    let xlsxBlob = new Blob(
        [
            stringToBuff(
                XLSX.write(workbook, {
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                })
            )
        ],
        { type: '' }
    );

    const a = document.createElement('a');
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    a.href = URL.createObjectURL(xlsxBlob) ;// 创建对象超链接
    a.download = fileName
    a.click()
}

引入使用： import { downloadXlsx } from '/utils/xlsx';

exportExcel () {
  let datalist = []; // 需要导出的表格数据
  datalist.push([
      "姓名",
      "类型",
      "状态",
      "隔离天数",
      "隔离地址",
      "来源",
      "身份证号",
      "年龄",
      "性别",
      "手机号"
  ]);
  
  // this.list 获取后台接口数据
  this.list.forEach((item,index) => {
      // 拼接excel表格数据
      datalist.push([
          item.name,
          item.personTypeName,
          item.status,
          item.managedDays,
          item.isolationPlace,
          item.source,
          item.identityNumber,
          item.age,
          item.gender,
          item.phone
      ]);
  });
  downloadXlsx(datalist, this.eventName + "人员列表.xlsx");
}

第二种方式：通过后端接口导出

exportExcel () {
  axios.get(`/api/shop/excel?shopId=${this.shopId}&time=${this.dateValue}`, {responseType: 'arraybuffer'}).then(res => {
    console.log(res)
    let url = window.URL.createObjectURL(new Blob([res.data]), {type: 'application/vnd.ms-excel;charset=utf-8'})
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.download = this.dateValue + '对账单.xlsx'
    document.body.appendChild(link)
    link.click()
  })
}