Vue前端导出Excel文件实现方案

1、技术选型

1.使用 vue-json-excel 插件实现

优势：简单便捷，易上手，开箱即用；javascript

缺点：不支持 excel 表格样式设置，且支持功能比较单一；html

2.基于 sheetJS-xlsx 解析器的 xlsx-style 实现（推荐）

优势：支持格式众多，支持 excel 表格样式设置，功能强大，可控性高，可读取和导出excel；vue

缺点：使用较为复杂，上手成本较大，且高级功能须要收费，但该功能能够借助 xlsx-style 实现；java

2、技术实现

使用 vue-json-excel 插件实现

1.安装 vue-json-excel 依赖

npm install -S vue-json-excel
复制代码

2.注册插件到 vue 实例

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);
复制代码

3.使用方式

在须要触发导出事件的外出包裹 download-excel 组件ios

该组件支持的属性可参考vue-json-excel 的 github 文档git

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>
复制代码

首先须要处理导出到 excel 文件的数据内容，分别是如下数据：github

表头名数据 json_fields：能够选择要导出的字段，并为字段分配标签。该数据类型为 Object ，key 对应的是标签，value 对应的是 JSON 字段，将导出与数据列表相同字段的数据。若是须要自定义导出的数据，能够定义回调函数。
表格数据 json_data：该数据类型为 Array，存储了须要导出的数据内容；

let json_fields = {
  // fieldLabel(表头名)，attributeName(对应字段名)
  fieldLabel: attributeName,
  // 使用回调自定义导出数据
  anotherFieldLabel: {
    field: anotherAttributeName,
    callback: (value) => {
      return `formatted value ${value}`;
    },
  },
};

let json_data = [
    {
        attributeName: value1,
        anotherAttributeName: value2
    },
    {
        attributeName: value3,
        anotherAttributeName: value4
    }
];
复制代码

处理完数据以后则能够将数据传入 download-excel 组件中，该组件没有任何样式，只须要设置内部包裹的元素样式便可；web

<download-excel class="btn btn-default" :data="json_data" :fields="json_fields" worksheet="My Worksheet" name="filename.xls" >
  Download Excel (you can customize this with html code!)
</download-excel>
复制代码

然而在实际的业务场景下，导出表格数据一般是导出表格的全部数据，因此在导出的过程当中，须要调用请求接口去获取表格中的全部数据，而调用接口获取数据是异步执行的过程，该插件也针对这个场景提供了解决方案。npm

基于 sheetJS-xlsx 解析器的 xlsx-style 实现（推荐）

因为这部分涉及内容较多，后续有须要会封装该功能

这里只对封装的 export2Excel 使用方法进行说明，暂时不对原理进行讲解。

该插件不只支持 excel 文件的导出，也支持文件导入功能，而且导出 excel 文件的不只支持 json 数据，也支持 table 导出；

因为 sheetjs-xlsx 提供的工具库其高级功能是付费项目，如修改表格样式等功能，所以选用了基于 sheetjs-xlsx 实现的 xlsx-style 插件。

兼容性：

1.安装依赖

npm install -S xlsx
npm install -S xlsx-style
复制代码

而 xlsx-style 插件在使用的时候会报错，官方也对该问题给出了解决方案，就是在根目录下的vue.config.js配置文件添加以下代码：

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'
    	}
  	}
}
复制代码

还有一种方案是改源代码，但不推荐使用，就不作说明了。

2.使用方法

这里封装了导出 excel 文件的方法，其中，文件下载的功能有两个方案实现，分别是：

经过 a 标签的文件下载功能，利用 URL.createObjectURL 方法生成下载连接实现；（本文使用的方法）
经过第三方插件 file-saver 插件实现文件下载功能；

js-xlsx 插件自带了相关的函数去方便实现不一样数据格式的转换：

aoa_to_sheet converts an array of arrays of JS data to a worksheet.
json_to_sheet converts an array of JS objects to a worksheet.
table_to_sheet converts a DOM TABLE element to a worksheet.
sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
sheet_add_json adds an array of JS objects to an existing worksheet.

下面是封装的 export2Excel 函数具体代码，只须要将代码复制到建立的 export2Excel.js 文件中便可：

/** * create by lwj * @file 导出export插件封装 */

import * as styleXLSX from 'xlsx-style'

/** * 将 String 转换成 ArrayBuffer * @method 类型转换 * @param {String} [s] wordBook内容 * @return {Array} 二进制流数组 */
function s2ab (s) {
    let buf = null;

    if (typeof ArrayBuffer !== 'undefined') {
        buf = new ArrayBuffer(s.length);
        let view = new Uint8Array(buf);

        for (let i = 0; i != s.length; ++i) {
            view[i] = s.charCodeAt(i) & 0xFF;
        }

        return buf;
    }

    buf = new Array(s.length);

    for (let i = 0; i != s.length; ++i) {

        // 转换成二进制流
        buf[i] = s.charCodeAt(i) & 0xFF;
    }

    return buf;
}

/** * 方案一：利用 URL.createObjectURL 下载 （如下选用） * 方案二：经过 file-saver 插件实现文件下载 * @method 文件下载 * @param {Object} [obj] 导出内容 Blob 对象 * @param {String} [fileName] 文件名 下载是生成的文件名 * @return {void} */ 
function saveAs (obj, fileName) {
    let aLink = document.createElement("a");

    if (typeof obj == 'object' && obj instanceof Blob) {
        aLink.href = URL.createObjectURL(obj); // 建立blob地址
    }
    
    aLink.download = fileName;
    aLink.click();
    setTimeout(function () {
        URL.revokeObjectURL(obj);
    }, 100);
}

/** * @method 数据导出excel * @param {Object} [worksheets] 工做表数据内容 * @param {String} [fileName='ExcelFile'] 导出excel文件名 * @param {String} [type='xlsx'] 导出文件类型 */
export default function export2Excel ({ worksheets, fileName = 'ExcelFile', type = 'xlsx' } = {}) {

    let sheetNames = Object.keys(worksheets);
    let workbook = {
        SheetNames: sheetNames, //保存的工做表名
        Sheets: worksheets
    };

    // excel的配置项
    let wopts = {  
        bookType: type,  // 生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，若是开启生成速度会降低，但在低版本IOS设备上有更好的兼容性
        type: 'binary'  
    }

    // attempts to write the workbook
    let wbout = styleXLSX.write(workbook, wopts);
    let wbBlob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    });

    saveAs(wbBlob, fileName + '.' + type);
}
复制代码

须要注意几个问题：

xlsx 和 xlsx-style 的默认导出函数名都是 XLSX ，若是同时导入的话，须要注意设置别名，避免函数覆盖出现问题；
若是不想使用 xlsx 插件，只使用 xlsx-style 插件一样也是能够的，只是要本身将须要导出的数据转换成 worksheet 格式对象，其原理也就是将导出数据转换成 worksheet 规定的数据格式，具体能够查看 js-xlsx 文档说明；（能够本身尝试实现）

而后只须要在须要导出 excel 的地方调用便可，若是对导出表格样式有要求的状况下，能够去了解如何配置表格样式，具体配置方法能够去 xlsx-style 文档中查看。

若是是 json 数据导出，须要对表头名和字段进行映射；