Vue + elementUI + file-Saver + XLSX export mergable Excel

Requirements:

NPM install file-saver XLSX -s

Second, data processing

<template>
  <div>
    <el-button @click="exportExcel"</el-button> <el-table :data="tableData"
              border
              ref="report-table"
              :span-method="formatTable"
              style="width: 100%">
      <el-table-column prop="date"
                       label="Date"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="Name"
                       width="180">
      </el-table-column>
      <el-table-column prop="gender"
                       label="Gender">
      </el-table-column>
      <el-table-column prop="address"
                       label="Address">
      </el-table-column>
    </el-table>
  </div>
</template>
Copy the code

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [].httpData: [{
        date: '2016'.name: 'one'.address: Lane 1518, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2016'.name: 'small 2'.address: Lane 1517, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2015'.name: 'Joe'.address: Lane 1519, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2015'.name: 'bill'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2014'.name: 'Cathy'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2013'.name: 'Daisy'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2012'.name: 'lai seven'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2012'.name: 'von eight'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2012'.name: 'von eight'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"
      }, {
        date: '2011'.name: '李久'.address: Lane 1516, Jinshajiang Road, Putuo District, Shanghai.gender: "Male"}}},created() {
    setTimeout(() = > {
      this.tableData = this.httpData;
      this.getRowColumn(this.httpData);
    }, 100)},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' }), 'export. XLSX')}catch (e) {
        if (typeofconcole ! = ='undefined') console.error(e)
      }
    }
  }
}
</script>

Copy the code