element UI table数据导出EXCEL

本文记录了一位开发者在Vue+Element UI环境下,实现表格数据导出为Excel文件的过程。开发者遇到了FileSaver.js导致的问题,最终通过js-xlsx库找到了解决方案。通过XLSX.utils.table_to_book、aoa_to_sheet和json_to_sheet方法,实现了自定义导出功能,解决了嵌入组件值丢失和选择导出行列的问题。
摘要由CSDN通过智能技术生成

最近有一个需求是需要将前端的表格数据导出为Excel,一开始我以为是个很简单的功能,网上的方法肯定一搜一大把。然而却耗费了我一下午时间,下面记录一下我的揪心历程。

我用的是vue+element UI,因此我找到的方法大部分是下面这样的:
vue2.0 + element UI 中 el-table 数据导出Excel

我在github上下载了文章中需要的这两个依赖项,然后在html中引入,可是不知道为啥,依赖于FileSaver.js的对象FileSaver始终为空对象,它方法自然也无法使用,于是我搜寻FileSaver为空的原因,可只是搜到一篇帖子有类似的问题,但没有给出解决办法,只是说saveAs这个方法是全局方法,可以直接使用,但我直接用这个方法下载的文件却存在格式问题,根本打不开。在我尝试多种解决办法无果后,我意识到也许是这个js有问题,于是我放弃了。(希望有知道原因的大佬指导一下,万分感激!!!)

我又继续找寻别的方法,希望找到一个不用FileSaver.js的解决方案。经过多次试错,皇天不负有心人,终于让我找到一篇介绍js-xlsx的文章:js-xlsx 介绍,其中有一个下载文件的方法:

        // 打开下载框
        openDownloadDialog(url, saveName) {
   
            if (typeof url == 'object' && url instanceof Blob) {
   
                url = URL.createObjectURL(url); // 创建blob地址
            }
            var aLink = document.createElement('a');
            aLink.href = url;
            aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
            var event;
            if (window.MouseEvent) event = new MouseEvent('click');
            else {
   
                event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            }
            aLink.dispatchEvent(event);
        }

看到这个下载方法时我才恍然大悟,我另外一个依赖项js-xlsx正常运行,可以生成workboo

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值