踩坑:vue表格插件vxe-table之导出 .xlsx 文件

vxe-table 默认支持导出 CSVHTMLXMLTXT格式的文件,不支持 xlsx 文件

要想导出 xlsx 文件,需要使用 vxe-table-plugin-export-xlsx 依赖

参考:https://cnpmjs.org/package/vxe-table-plugin-export-xlsx/v/2.1.0-beta

安装依赖(Installing)

npm install vxe-table-plugin-export-xlsx
// 基于 vxe-table 表格的适配插件,用于兼容 element-ui 组件库
...
import VXETable from 'vxe-table'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
...

VXETable.use(VXETablePluginExportXLSX)

demo

 <vxe-grid
   border
   size="mini"
   resizable
   keep-source
   show-footer
   show-overflow
   ref="addressTab"
   height="500"
   :toolbar-config="{buttons:[],slots: {buttons: 'toolbar_buttons'}}"
   :columns="columns"
   :data="data"
   :edit-config="{
     showStatus: true
   }"
   @checkbox-change = "checkboxChange"
 >
   <template v-slot:toolbar_buttons>
     <vxe-button icon="el-icon-plus" @click="importExcel()" status="primary" >导入Excel</vxe-button>
     <vxe-button icon="vxe-icon--download" @click="exportExcel()" status="primary" >导出模板</vxe-button>
   </template>
 </vxe-grid>
// 导出elsx
exportExcel(){
      this.$refs.addressTab.exportData({
        filename:"出库地址明细模板",
        sheetName: 'Sheet1',
        type:'xlsx',
        types: ['xlsx', 'csv', 'html', 'xml', 'txt'],
        useStyle:true, //是否导出样式
        isFooter:false, //是否导出表尾(比如合计)
        // 过滤那个字段导出
        columnFilterMethod: function(column, $columnIndex) {
          return !(column.$columnIndex === 0 )
          // 0是复选框 不导出
        }
      })
    },

踩坑记录:
一开使用的是3.0版本的,依赖,这样使用就会报错 Uncaught (in promise)
百思不解!各种百度,找不到想要的方案,当然有其他的方法写,比如直接用xlsx.js,但是看着好麻烦,不想使用!
直到 浏览到 vxe-table 的码云地址: https://gitee.com/xuliangzhan_admin/vxe-table#license
看到一评论:
在这里插入图片描述
突然想到,会不会是版本的问题,于是乎,抱着试试的态度,卸载3.0的版本,安装2.0版本

npm uninstall vxe-table-plugin-export-xlsx
npm install vxe-table-plugin-export-xlsx@2.0.0

WTF,成功了!我一天的时间!

另:如遇到下面的报错,则需要安装 exceljs

npm install exceljs

在这里插入图片描述

MORE

PDF 依赖: vxe-table-plugin-export-pdf

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值