拯救前端懒癌患者——Excel导出

前言

几乎所有的前端只要是做过后台管理系统的都会碰到一个需求，那就是导出Excel。

导出表格或许特别简单也或许特别复杂，如果后端提供了Excel对应的服务器下载地址那对于前端来讲再好不过了。但若需要前端自己对数据进行处理并且实现导出文件看起来就有点棘手。为了解决前端导出Excel的问题，一些库应运而生，不过很多都需要对表格数据进行组装，光是看那一长串的API就头痛，那有没有一个库用法既简单又功能强大呢？必须有，我们今天就来介绍这样一款Excel库。

js-xlsx

js-xlsx是SheetJS推出的一个用于处理Excel相关问题的前端工具库，支持几乎所有框架和平台且非常好上手。

js-xlsx

安装

js-xlsx支持直接引入资源文件以及npm、bower安装:

// 可以从官方github上下载
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
// 也可以引入CDN地址
<script src="https://cdn.bootcss.com/xlsx/0.14.3/xlsx.full.min.js"></script>

npm:

1	$ npm install xlsx

bower:

1	$ bower install js-xlsx

使用

这里以Angular为例:

第一步准备好数据:

$scope.data = [
  { Name: "Bill Clinton", Index: 42 },
  { Name: "GeorgeW Bush", Index: 43 },
  { Name: "Barack Obama", Index: 44 },
  { Name: "Donald Trump", Index: 45 }
];

第二步将数据渲染到table上:

<table id="sjs-table">
  <tr><th>Name</th><th>Index</th></tr>
  <tr ng-repeat="row in data">
    <td>{{row.Name}}</td>
    <td>{{row.Index}}</td>
  </tr>
</table>

最后，导出:

1 2	var wb = XLSX.utils.table_to_book(document.getElementById('sjs-table')); XLSX.writeFile(wb, "export.xlsx");

简简单单三步，大功告成。其实这里js-xlsx就是帮助我们将页面上的表格dom直接处理成Excel文件，不过当然生成dom并不是唯一的用法，你也可以将数据直接注入到表格中生成文件:

var data = [
  { name: "Barack Obama", pres: 44 },
  { name: "Donald Trump", pres: 45 }
];
var ws = XLSX.utils.json_to_sheet(data);
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Presidents");
XLSX.writeFile(wb, "sheetjs.xlsx");

多表格

js-xlsx还支持将多张表格一次性导出到同一个文件中:

var workbook = XLSX.utils.book_new();
var ws1 = XLSX.utils.table_to_sheet(document.getElementById('table1'));
XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
var ws2 = XLSX.utils.table_to_sheet(document.getElementById('table2'));
XLSX.utils.book_append_sheet(workbook, ws2, "Sheet2");

控制百分比显示

表格中如果有诸如41%这样的百分比数据在导出的Excel中会显示成0.41，只需要一个配置就可以避免这样的自动转换:

1	var wb = XLSX.utils.table_to_book(document.getElementById('sjs-table'), {raw: true});

raw这个参数用来配置是否保持原有字符串。

结语

今天只是对jx-xlsx做了一个最常用功能的介绍，其他框架的用法GitHub上也都有详尽介绍。更多丰富的功能我也还在发掘中。