前端Table导出Excel

前端Table导出Excel

第一步

npm install exceljs@4.3.0
npm install file-saver@2.0.5

第二步

在src目录下创建一个utils包，在utils包里复制下面这两个js文件：

generateHeaders.js

// 根据组件库的 column 生成 exceljs 的 column
export function generateHeaders(columns) {
    return columns.map(col => {
        // 这个判断是针对antd组件库，使用element-ui直接复制也没事
        // columns是dataIndex形式
        if (col.dataIndex !== "") {
            var obj = {
                header: col.title,
                key: col.key
            };
        }
        // columns是插槽形式
        else {
            var obj = {
                header: col.title,
                key: col.scopedSlots.customRender
            };
        }
        return obj;
    })
}

saveWorkbook.js

import {saveAs} from "file-saver";

// 导出excel文件
export function saveWorkbook(Workbook, fileName) {
    // 导出文件
    Workbook.xlsx.writeBuffer().then((data => {
        const blob = new Blob([data], {type: ''});
        saveAs(blob, fileName);
    }))
}

第三步

在你需要导出数据的那个vue文件里引入下面的三个工具类

import * as ExcelJs from 'exceljs';
import {saveWorkbook} from "@/utils/saveWorkbook";
import {generateHeaders} from "@/utils/generateHeaders";

定义excel的表头（此处的title就是组件库的label，key就是prop）

columns: [
    {
          title: '姓名',
          scopedSlots: {customRender: 'personName'}, // 这个是针对antd的，element-ui只要title和key即可
          key: 'userName',
    },
    {
          title: '性别',
          key: 'sex',
    },
    {
          title: '年龄',
          key: 'age',
    }
],

定义触发事件的按钮

  <a-button @click="onExportBasicExcel">
    <a-icon type="download"/> 导出excel
  </a-button>

函数实现

onExportBasicExcel() {
      // 创建工作簿
      const workbook = new ExcelJs.Workbook();
      // 添加sheet
      const worksheet = workbook.addWorksheet('sheet');
      // 设置 sheet 的默认行高
      worksheet.properties.defaultRowHeight = 20;
      // 设置列(表头)
      worksheet.columns = generateHeaders(this.columns);
      // 添加行（这个dataList就是table的数据，即你从后端拿来的数据）
      worksheet.addRows(this.dataList);
      // excel文件命名
      saveWorkbook(workbook, `${xxx}xx表.xlsx`);
},