vue实现简单的excel表格导出-第三方插件

最新推荐文章于 2024-07-25 15:19:10 发布

jan老白

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量701

点赞数

分类专栏：实战项目 vue2学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40332446/article/details/125626521

版权

vue2学习笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

实战项目

2 篇文章 0 订阅

订阅专栏

1.引入table-xlsx包

npm install --save table-xlsx @pengchen/xlsx

2.导出方法定义

import { exportFile } from 'table-xlsx'
/**
 * export table
 * @param data 表格数据
 * @param columns 表格表头
 * @param fileName 导出文件名
 */
function onTableExport(data, columns, fileName) {
  // 过滤无用的列
  const tColumns = columns.filter(item => item.dataIndex !== 'action')
  const thead = [
    {
      title: fileName, // 将文件名作为excel表格标题
      children: tColumns
    }
  ]
  exportFile({
    columns: thead,
    dataSource: data,
    cellStyle: {
      alignmentHorizontal: 'center',
      borderColorRgb: '000000'
    },
    headerCellStyle: {
      fillFgColorRgb: 'ffffff',
      fontBold: false,
      borderColorRgb: '000000',
      alignmentHorizontal: 'center'
    },
    bodyCellStyle: {
      alignmentHorizontal: 'center'
    },
    fileName: `${fileName + new Date().getTime()}.xlsx`
  })
}