vue2.0 + element UI 中 el-table 数据导出Excel

最新推荐文章于 2024-07-29 20:11:11 发布

qq_39355295

最新推荐文章于 2024-07-29 20:11:11 发布

阅读量1k

点赞数

分类专栏： UI组件 vue

本文链接：https://blog.csdn.net/qq_39355295/article/details/102473906

版权

本文介绍了如何在Vue2.0项目中结合Element UI库，实现表格数据导出到Excel的功能。首先，需要安装相关依赖。然后，在组件中引入并定义导出按钮，接着提供导出方法。在util.js组件中实现具体导出逻辑，包括一次性导出多个页面的所有表格数据，以及单页面内多个表格的导出。导出过程需要确保所有表格数据已预先获取完成。

摘要由CSDN通过智能技术生成

安装相关依赖

npm install --save xlsx file-saver

组件里头引入：这里utils.js是我的实现方法的组件

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

1、定义导出按钮：

<el-button type="primary" size="medium" v-if="$store.state.isPC" @click="exportExcel">
导出报表
</el-button>

2、实现方法：

methods: {
    exportExcel () {
      var data = []
      data.push({
      	name: 'name',
      	id: '#table_' + '05'
      })
      utils.exportExcel(data)
    },

3、util中实现方法：

exportExcel (data, name = 'sheet') {
    var workbook = XLSX.utils.book_new()
    for (var index = 0; index < data.length; index++) {
      var table = document.querySelector(d