vue+xlsx插件实现table表格的简单导出——技能提升

之前是写过很多关于表格的导出功能，最常见的解决办法就是后端导出，前端只需要调用接口即可，这种的导出就变成了 后端返回文档流，前端调用接口后在下载文档流的问题。

下载文档流的方法

下载文档流的方法：http://t.csdn.cn/HY4so

还有其他的方法就是前端自行导出，这种方式有局限性，当表格数据过多导致分页展示的时候，前端处理只能导出当前页面的数据了。

前端导出：适用于不分页的表格数据

今天看到之前同事写的代码，是关于xlsx插件实现表格数据导出的功能。

此时可以直接将页面中的table表格格式及内容直接导出。需要用到xlsx插件。

1.安装xlsx插件——npm install xlsx -save

我这边安装的版本是0.18.5

2.封装导出方法

import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export function exportToExcel(fliename, dom, that) {
    
    
  const XLSX = require('xlsx');
  console.log('XLSX', XLSX, FileSaver);
  // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行document.querySelector('#oIncomTable')
  that.$nextTick(function() {
    
    
    // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
    const xlsxParam = {
    
     raw: true };
    const wb = XLSX.utils.table_to_book(dom, xlsxParam);
    // 导出excel文件名
    let fileName = fliename + new Date().getTime() + '.xlsx';

    const wbout = XLSX.write(wb, {
    
    
      bookType: 'xlsx',
      bookSST: true,
      type: 'array',
    });
    try {
    
    
      // 下载保存文件
      FileSaver.saveAs(
        new Blob([wbout], {
    
     type: 'application/octet-stream' }),
        fileName
      );
    } catch (e) {
    
    
      if (typeof console !== 'undefined') {
    
    
        console.log(e, wbout);
      }
    }
    return wbout;
  });
}

3.导出方法的使用

import {
    
     exportToExcel } from '@/utils/ExcelUtils';//此处的路径跟实际路径要相符合

导出方法的使用：

//导出
exportData() {
    
    
  exportToExcel('成本核算', document.querySelector('#oIncomTable'), this);
},

html代码中的：重点是要绑定id属性，通过document.querySelector('#oIncomTable')可以获取到table元素。

<a-table
  id="oIncomTable"
  :rowKey="(r, i) => i"
  :columns="columns"
  :dataSource="itemMains"
  :scroll="{ y: 500 }"
  :pagination="false"
  :loading="spinning"
  style="margin-top: 10px;"
  class="tableCls"
  bordered
  :customRow="loadCustomRow"
>
</a-table>

完成！！！如果不注重导出后表格的样式，则上面的代码就足够了。如果还需要设置居中/行间距/宽度等表格样式，则需要xlsx-style插件了。

多多积累，多多收获！！！