【工具】前端实现导出Excel

AlesanderX

于 2024-09-10 10:51:51 发布

阅读量112

点赞数 1

分类专栏：前端相关文章标签：前端

本文链接：https://blog.csdn.net/weixin_44207805/article/details/142092914

版权

前端相关专栏收录该内容

15 篇文章 0 订阅

订阅专栏

传入数据和列名

      exportExcel(this.tableData, this.columns, '记录表');

exportExcel.js

import * as XLSX from "xlsx";

export function exportExcel (tableData, columns,fileName)  {
    //创建一个新的工作簿
    const wb = XLSX.utils.book_new();
    // 创建工作表
    const ws = XLSX.utils.json_to_sheet(tableData.map(row => {
      return columns.reduce((obj, col) => {
        const fieldName = col.field || col.name;
        const value = typeof col.field === 'function'? col.field(row) : row[fieldName];
        if (col.label.trim() !== '操作' && col.label.trim() !== '序号') {
          obj[col.label] = value;
        }
        return obj;
      }, {});
    }));

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    // 生成 Excel 文件的二进制内容
    const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'array'});
    // 创建一个 Blob 对象，用于文件下载
    const blob = new Blob([wbout], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
    // 创建一个链接元素，用于触发下载
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = fileName+'.xlsx';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}