Vue导出表格数据

最新推荐文章于 2024-06-22 14:00:21 发布

李遇·

最新推荐文章于 2024-06-22 14:00:21 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51201589/article/details/124528759

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何在Vue项目中安装并使用npminstall-Sfile-saverxlsx和npminstall-Dscript-loader插件来实现数据导出为Excel文件的功能。通过示例代码展示了如何处理数据以合并重复单元格，并在页面上添加导出按钮，点击后即可导出带有合并单元格效果的Excel表格。此外，还提供了具体的事件处理函数和数据结构示例。

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

安装插件

npm install -S file-saver xlsx

npm install -D script-loader

准备数据（用数组数据模拟一下）

httpData: [{
        date: '2016',
        name: '大一',
        address: '上海市普陀区金沙江路 1518 弄',
        gender: "男"
      }, {
        date: '2016',
        name: '小二',
        address: '上海市普陀区金沙江路 1517 弄',
        gender: "男"
      }, {
        date: '2015',
        name: '张三',
        address: '上海市普陀区金沙江路 1519 弄',
        gender: "男"
      }, {
        date: '2015',
        name: '李四',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2014',
        name: '王五',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2013',
        name: '赵六',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '赖七',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '冯八',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2012',
        name: '冯八',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }, {
        date: '2011',
        name: '李久',
        address: '上海市普陀区金沙江路 1516 弄',
        gender: "男"
      }]

在你要导出表格的"xxx.vue"页面给按钮绑定点击事件：（绑定导出事件，这里用的element）

<el-button @click="exportExcel">点击导出</el-button>

事件代码如下：

methods: {
    // 改变
    getRowColumn (data) {
      let self = this;
      self.rowAndColumn = [];
      self.rowRoomColumn = [];
      for (var i = 0; i < data.length; i++) {
        if (i == 0) {
          self.rowAndColumn.push(1);
          self.pos = 0;
          self.rowRoomColumn.push(1);
          self.posT = 0;
        } else {
          if (data[i].date == data[i - 1].date) {
            self.rowAndColumn[self.pos] += 1;
            self.rowAndColumn.push(0);

            if (data[i].name == data[i - 1].name) {
              self.rowRoomColumn[self.posT] += 1;
              self.rowRoomColumn.push(0);
            } else {
              self.rowRoomColumn.push(1);
              self.posT = i;
            }
          } else {
            self.rowAndColumn.push(1);
            self.pos = i;
            self.rowRoomColumn.push(1);
            self.posT = i;
          }
        } 
      }
    },
    formatTable ({ row, column, rowIndex, columnIndex }) {
      let self = this;
      if (columnIndex == 0) {
        if (self.rowAndColumn[rowIndex]) {
          let rowNum = self.rowAndColumn[rowIndex];
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
      if (columnIndex == 1) {
        if (self.rowRoomColumn[rowIndex]) {
          let roomNum = self.rowRoomColumn[rowIndex];
          return {
            rowspan: roomNum,
            colspan: roomNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    exportExcel () {
      try {
        const $e = this.$refs['report-table'].$el;
        let $table = $e.querySelector('.el-table__fixed');
        if (!$table) {
          $table = $e;
        }
        const wb = XLSX.utils.table_to_book($table, { raw: true });
        const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }), '导出.xlsx'
        )
      } catch (e) {
        if (typeof concole !== 'undefined') console.error(e)
      }
    }
  }

效果如下：