VUE-如何实现纯前端导出Excel文件

excel导出一般后台可以实现，但是如果前台已经有了符合要求的数据，也可以在前端纯js导出。在操作excel方面，已经有很多库支持，本文介绍xlsx实现excel导出功能。

• 安装依赖

第一步我们要做的就是，需要安装三个依赖。
FileSaver.js是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的场景。xlsx就是生成excel必要的库。

 

    // npm
    cnpm install --save file-saver xlsx

    cnpm install --save script-loader

• 下载js

第二步，我们需要额外下载两个jsBlob.js和Export2Excel.js，
在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

如果没有积分，可以在其github下载

• 引入js

第三步，接下来就需要引入这两个js文件，如果导出excel的业务场景比较多，可以挂载在main.js中，因为笔者的项目此类场景比较少，所以在对应的组件中再引用。

 

    //导出excel
    import Blob from '@/excel/Blob'
    const { export_json_to_excel } = require('@/excel/Export2Excel');

Export2Excel.js 中引入Blob的路径也要相应修改。

 

require('script-loader!file-saver');
require('./Blob.js'); //改成相对路径
require('script-loader!xlsx/dist/xlsx.core.min');

• 使用方法

第四步，可以在组件中使用export_json_to_excel这个方法了，datalist属性就是是数据集，要和filterVal里的属性名要一一对应。

 

//导出的方法
  exportExcel() {
  
    require.ensure([], () => {
      // 设置Excel的表格第一行的标题
      const tHeader = ['日期','strut1长度', 'strut2长度'];
     //  'date', 'struct1', 'struct2'对象的属性
      const filterVal = [ 'date', 'strut1', 'strut2'];
      
      // 数据集
      const list = this.datalist;  
      const data = this.formatJson(filterVal, list);
      // excel名称可自定义
      const excelName = "excel名称";
      export_json_to_excel(tHeader, data, excelName);
    });
  },
  //格式化json
  formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
  }

• 调整布局

第五步，如果出现导出的excel列宽太窄，可以自定义列宽，修改Export2Excel.js中的export_json_to_excel方法中ws['!cols']的属性了

 

export function export_json_to_excel(th, jsonData, defaultTitle) {

    /* original data */

    var data = jsonData;
    data.unshift(th);
    var ws_name = "SheetJS";

    var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

    // 设置每列的宽度
    ws['!cols'] = [{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100},{wpx:100}];
    /* add worksheet to workbook */
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;

    var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
    var title = defaultTitle || '列表'
    saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

• 总结

此文只是简单的介绍了如何实现简单的excle导出功能，如果要实现更加复杂的excle布局或者样式，那就要研究Export2Excel.js了，以及xlsx的相关api，以后有时间再补充