vxe-table导出xlsx，2024年7月可用

枫原七七

已于 2024-10-12 15:54:35 修改

阅读量1.3k

点赞数 5

文章标签： vue.js

于 2024-07-25 14:50:47 首次发布

本文链接：https://blog.youkuaiyun.com/yanzhe6789/article/details/140685158

版权

vxe-table引用vxe-table-plugin-export-xlsx导出xlsx,2024年7月25日亲测可用

先上版本
在这里插入图片描述
vxe-table:3.8.9
插件：3.3.2
写在前面的废话(代码在后面，建议先看废话)：
如果你的版本不一样，遇到什么问题先去看官方对应版本的写法
https://npmmirror.com/package/vxe-table-plugin-export-xlsx?version=3.3.2
https://github.com/x-extends/vxe-table-plugin-export-xlsx/issues
注意:会看到好多文章写用2.2.2或2.0.0的基本都是一个人写了万家复制，刚开始我也是尝试用的2.2.2，也试了2.0.0，都还是不支持导出xlsx，报错Uncaught (in promise)，然后试了3.3.1，能导出了，但是表格合并有问题(可能3.3.1没问题，是我没加isMerge，当时没试，就直接翻它github去了)，然后看到了下图 3周前有人提出的，没人回复我就默认他有问题了。
在这里插入图片描述
版本换成了3.3.2，添加了isMerge，多级表头，表格样式，内部合并都没问题。

引入

！！！按官方的来我这个时间最新就是3.3.2，后来的可以@限制一下版本
npm install vxe-table vxe-table-plugin-export-xlsx exceljs

import { VxeUI } from ‘vxe-table’
import VXETablePluginExportXLSX from ‘vxe-table-plugin-export-xlsx’
import ExcelJS from ‘exceljs’

VxeUI.use(VXETablePluginExportXLSX, {
ExcelJS
})

html

<vxe-table
  ref="xTable"
>
</vxe-table>
       <el-button type="primary" @click="exportExcel">
    导出
    </el-button>

js

// 导出
exportExcel(){
  this.$refs.xTable.exportData({
    type: "xlsx",
    filename: "测试" ,
    useStyle:true, // 导出使用页面样式
    isMerge:true,  //  合并单元格
    // original: false,
    // mode: "all",
    // isHeader: true,
    // download: true,
    columnFilterMethod({ column }) {  // 隐藏列
      return column.field !== "name";
    },
  })
}

代码有省略的地方，关键代码就这些。。目前有一个问题，隐藏列和合并单元格有冲突！如果你第一列纵向合并，然后隐藏了，导出来，原本第一列的合并就到原本第二列，也就是导出第一列上去了；应该是导出合并和隐藏列的方法没有联动，但是我用不到，就没再深究，一般隐藏最后一列操作列，应该不影响。