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插件了。

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

下面的内容为补充内容，可忽略！！！

在Vue的开发中，难免会遇到需要导入或导出Excel文件的需求。为了满足这个需要，我们可以使用xlsx-js库。该插件提供了一些导入和导出Excel文件的方法，同时也可以对导入的数据进行操作和解析。

在使用该插件之前，我们需要用npm安装它。可以使用以下命令进行安装：

npm install xlsx --save
之后，我们需要将插件引入到需要使用的组件里面：

import XLSX from ‘xlsx’;

1、xlsx插件包官方 xlsx插件包官方
2、FileReader官方文档：FileReader官方文档

现在，我们可以使用一些方法来操作Excel文件了。首先，可以使用XLSX.read方法从文件中读取数据。该方法接受三个参数。第一个参数是File对象，第二个参数是读取的配置，第三个参数是将数据转换为JSON的配置。当该方法成功执行后，返回的是一个JSON对象，它可以遍历并作为数据渲染到网页中。以下是一个用法示例：

let file = e.target.files[0];
let reader = new FileReader();
reader.readAsBinaryString(file);
reader.onloadend = () =>{
let data = reader.result;
let workbook = XLSX.read(data, {
type: ‘binary’
});
let worksheet = workbook.Sheets[workbook.SheetNames[0]];
let json = XLSX.utils.sheet_to_json(worksheet, {header:1});
}
另外，如果需要将数据导出到Excel文件中，则可以使用XLSX.write方法。该方法需要传递三个参数。第一个参数是一个JSON对象，第二个参数是导出文件的配置，第三个参数是Worksheet名称。该方法执行结束后，会返回一个Blob对象。以下是一个用法示例：

let worksheet = XLSX.utils.json_to_sheet(jsonData);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, ‘Sheet1’);
let wbout = XLSX.write(workbook, {
bookType: ‘xlsx’,
type: ‘binary’
});
let saveAs = require(‘file-saver’).saveAs;
saveAs(new Blob([s2ab(wbout)], {type: “application/octet-stream”}), fileName + “.xlsx”);
除了读取和导出文件外，XLSX插件还提供了一些其他功能，比如说从url或元素中读取Excel文件，从csv中读取和写入Excel文件等等，针对不同的需求，可以选择不同的方法来使用。

在使用XLSX插件的过程中，需要注意的是，它并不支持IE浏览器，所以如果需要兼容IE浏览器，可能需要考虑其他的方案。