element-ui表格导出及导出数据重复问题-CFANZ编程社区

1，element-ui表格导出
这个功能很容易实现，网上也有很多相关方法，一般都是使用xlsx和file-saver，这里我直接贴上自己使用的封装.

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

// 定义导出Excel表格事件
export function outFile(id, fileName) {
  /* 从表生成工作簿对象 */
  var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })
  try {
    FileSaver.saveAs(
    // Blob 对象表示一个不可变、原始数据的类文件对象。
    // Blob 表示的不一定是JavaScript原生格式的数据。
    // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
    // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      new Blob([wbout], { type: 'application/octet-stream' }),
      // 设置导出文件名称
      fileName + '.xlsx'
    )
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
  return wbout
}

上面这个js直接引入使用即可。下面为使用：

// 引入
import { outFile } from '@/utils/excel'
//使用，其中参数1为表格id，参数2为报表名称
outFile('cust', '(报表)')

2，表格导出数据重复问题
问题产生：产生数据重复问题主要是因为element表格使用的时候使用了fixed属性，审查元素可发现，elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。
问题解决：修改fixed属性值即可。这里重新构造导出函数。

<el-table id="cust" :data="tableData" style="width: 100%" max-height="700px" border :header-cell-style="{background:'#EBEEF5',color:'#001528'}">
  <el-table-column prop="name" label="名称" width="300" :fixed="fixs" :show-overflow-   tooltip="true" />
  <el-table-column
   v-for="index of tableCol"
   :key="index"
   :prop="index-1+'s'"
   :label="tableCol===24?(index-1)+colName:index+colName"
   />
  </el-table>
<script>
export default {
  data() {
    return {
      ...
      fixs: true
    }
  },
  methods: {
    excelOut() {
      this.fixs = false
      this.$nextTick(() => {
        outFile('cust', '(报表)')
        this.fixs = true
      })
    },
}
</script>