vue2.0 导出 Excel 功能快速实现

安装依赖

npm install --save xlsx file-saver

vue中引入

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

el-table定义id

methods中编写导出方法

//导出Excel表格
      exportExcel () {
         this.pageSize = 100;//表格长度变长
         this.pageIndex= 1;
         this.getDataList(true)
              },
     exportExe(){
        var wb = XLSX.utils.table_to_book(document.querySelector('#tableTest'))
        var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
        var xlsxName = new Date().getTime()
        try {
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), xlsxName+'.xlsx')
        } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
        this.pageSize = 10;//表格还原
         this.getDataList()
     },

注意：#tableTest 为el-table的id，test.xlsx为导出文件名称！getDataList（）是获取表格内容方法

// 获取数据列表
      getDataList (isExport) {
        debugger
        this.dataListLoading = true
        var params = {
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.dataForm.name,
          orgId: this.dataForm.orgId,
          businessCriticity:this.dataForm.businessCriticity
        }
        this.$http({
          url: this.$http
          .adornUrl('/aqfw/viewfunctionalci/list'),
          method: 'get',
          params: params
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        }).then(val=>{
          if(isExport){
            this.exportExe()
          }
        })
      },

编写导出按钮代码

导出

若表格内容使用fixed会打印出重复的数据，使用fixed的元素会另生成一个table结构。

大工告成！！！