element-ui中table表格数据的导出功能

╰+攻爆jí腚メ 2021-09-02 05:56 1375阅读 0赞

## element-ui中的table表格导出 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
对于一个电商类型的后台管理系统，订单列表是需要能够实现导出的。导出成excel格式。

在element-ui中表格是使用的table表格组件，问题也就是转化成table组件的导出。

百度一下，你就知道。

这个功能不是我这边做，是同事做，在此记录一下其中的一种解决办法。

关于table表格的导出，有几种实现方式：

## 后台提供下载excel表格的链接 ##

对于前端而言最简单的方式就是：后端来处理数据，当前端触发【导出】按钮时，调用接口，后端处理数据后返回一个下载链接，然后由前端通过`window.open(url)`的方式来打开下载链接，然后会自动下载excel表格。

## 前端根据后台提供的数据自行处理 ##

后台提供的方式有两种，一种提供的是数据，一种提供的是流。

如果是前端这边处理，则可以参考下方的链接，通过插件来实现这个导出功能。

[vue2.0 + element UI 中 el-table 数据导出Excel https://blog.csdn.net/u010427666/article/details/79208145 ][vue2.0 _ element UI _ el-table _Excel https_blog.csdn.net_u010427666_article_details_79208145]

大致的解决步骤就是：

1.  安装相关依赖  
    主要是两个依赖  
    `npm install --save xlsx file-saver`
2.  组件里头引入
    
        import FileSaver from 'file-saver'
        	 import XLSX from 'xlsx'
3.  组件methods里写一个方法

exportExcel () { 
             /* generate workbook object from table */
             var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
             /* get binary string as output */
             var wbout = XLSX.write(wb, {  bookType: 'xlsx', bookSST: true, type: 'array' })
             try { 
                 FileSaver.saveAs(new Blob([wbout], {  type: 'application/octet-stream' }), 'sheetjs.xlsx')
             } catch (e) {  if (typeof console !== 'undefined') console.log(e, wbout) }
             return wbout
         },

注意：XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！

1.  点击导出按钮执行 exportExcel 的方法即可
    
        据说上面的这个前端自行处理的办法会有分页的问题。具体代码我没有写，在此记录一下，以防下次遇到。mark一下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/47f0fd8107b540e6940cf8d7c79d158d.png
[vue2.0 _ element UI _ el-table _Excel https_blog.csdn.net_u010427666_article_details_79208145]: https://blog.csdn.net/u010427666/article/details/79208145