vue + element UI 实现表格数据导出 Execl 表格

首先这个导出 基于 这些插件 xlsx、file-saver、xlsx-style 

下载依赖

npm install --save xlsx
npm install --save file-saver
npm install --save xlsx-style

tips1：如果需要调整表格样式 需要下载 xlsx-style 如果不需要样式 可以不用下载

引入依赖

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import XLSXStyle from 'xlsx-style' // 如果不需要 可以不用引入 下载

tips2：如果下载了xlsx-style  引入会报错 报node_modules/xlsx-style/dist/cpexcel.js找不到  这里需要修改一下这个依赖 找到 node_modules/xlsx-style/dist/cpexcel.js 文件 搜索 
var cpt = require('./cpt' + 'able'); 改为 var cpt = cptable;

使用

给 <el-table> 定义一个 id（可以随意定义） 我这边定义 id = 'exportTable'

• 不需要样式

toExcel () {
  var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
  var wb = XLSX.utils.table_to_book(document.querySelector('#exportTable'), xlsxParam)
  /* get binary string as output */
  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  try {
     FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据列 
     表.xlsx')
  } catch (e) {
    if (typeof console !== 'undefined') {
     console.log(e, wbout)
    }
  }
  return wbout
}

•  需要样式

  toExcel () {
    var xlsxParam = { sheet: 'Sheet JS', raw: true } // 导出的内容只做解析，不进行格式转换
    var wb = XLSX.utils.table_to_book(document.querySelector('#exportTable'), xlsxParam)
    let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref'])
    for (let C = range.s.c; C <= range.e.c; ++C) {
      for (let R = range.s.r; R <= range.e.r; ++R) {
        let cell = { c: C, r: R }
        let cellRef = XLSX.utils.encode_cell(cell)
        if (wb.Sheets['Sheet JS'][cellRef]) { // 每个单元格的样式
          wb.Sheets['Sheet JS'][cellRef].s = {
        	  alignment: {
          	horizontal: 'center', // 水平对齐
          	vertical: 'center' // 垂直对齐
        	  },
        	  font: {
          	name: '宋体',
          	sz: '14',
         		bold: false
        	 }
        }
    	}
    }
   }	
   /* get binary string as output */
   var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' }
   var wbout = XLSXStyle.write(wb, wopts)
   FileSaver.saveAs(new Blob([this.s2ab(wbout)], { type: '' }), '数据列表.xlsx'
  }
  s2ab (s) {
     var buf = new ArrayBuffer(s.length)
     var view = new Uint8Array(buf)
     for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
     return buf
  }

   

 tips3：这个方法用于element UI 的表格可以 也可以用于自己搭的表格 是都可以的 

tips4：如果导出的数据有两份 是因为 element UI table 的fixed属性 可以注释掉

tips5：这个导出的时候只能导出第一页的数据 如果第一页有十条那也只能导出十条 可以写一个table （display:none）这个表格里面渲染不分页的数据 导出的时候导出这个表格的 我这边是数据比较多 怕查两个接口 耽误进度 所以我重新封装了一个组件 在点击导出的时候在组件里面重新查找渲染 然后再执行导出这个方法 如果使用组件的话 需要注意 要在this.$nextTick(() => {})里面执行导出的方法 要不然就会导出一个空的数据了 组件里面也可以直接渲染需要的数据 防止一些表格里面的按钮被导出 也可以自定义头部 但是我没有使用 如需自定义头部 可以去别人的文章看看 

tips6：样式也可以增加别的 比如边框 背景色...... 如果使用样式 一定要用XLSXStyle.write 
XLSX只有默认的 没有样式！！！

希望可以帮助到大家 

如有问题可在底部留言 看到会回复的