网页导出数据至 Excel

[Dream4ever]

需求描述

将一组数据导出到 Excel 中，xlsx 或者 CSV 格式均可，数据中包含数字，保证导出的结果正确即可。

因为 Excel 默认会将数字显示为科学计数法的形式，即数字 10000000000000 会显示为 1E+13 ，所以要想办法解决这个问题。

方案调研

调研过程

先 Google js export to excel ，在第一个链接 JS导出excel插件总结 中列出了三种方案，三个项目 excellentexport、exceljs 和 js-xlsx 的 Star 数量级分别在 600、2500 和 10000，那就用 js-xlsx 这个库吧。

入选方案

• js-xlsx：Star 数过万，应该是最靠谱的。

排除方案

• excellentexport：600+ 的 Star。
• exceljs：2500+ 的 Star。

应用过程

接着用 js-xlsx save array 作为关键字 Google，第一个结果指向 js-xlsx 在 GitHub 的官网，第二个结果则是该项目在 GitHub 上的 issue：How to simply export a Worksheet to xlsx? · Issue #817 · SheetJS/js-xlsx，很可能会看到示例代码，点进去看看。

第一条回复 就给出了导出数组到 Excel 中的方法：

/* external references:
  - https://rawgit.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js
  - https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js
*/
/* original data */
var data = [
    {"name":"John", "city": "Seattle"},
    {"name":"Mike", "city": "Los Angeles"},
    {"name":"Zach", "city": "New York"}
];

/* this line is only needed if you are not adding a script tag reference */
if(typeof XLSX == 'undefined') XLSX = require('xlsx');

/* make the worksheet */
var ws = XLSX.utils.json_to_sheet(data);

/* add to workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "People");

/* write workbook (use type 'binary') */
var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});

/* generate a download */
function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}

saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "sheetjs.xlsx");

自己根据业务需求修改后的代码如下：

import FileSaver from 'file-saver';
import XLSX from 'xlsx';

// 只取对象中指定的三个属性
const getSerial = R.map(ele => R.pick(['serial', 'user', 'valid'])(ele));
const ws = XLSX.utils.json_to_sheet(getSerial(this.detail));
const wb = XLSX.utils.book_new();

// 最后一个参数定义工作表的名称
XLSX.utils.book_append_sheet(wb, ws, '激活码');

// 写入 xlsx 文件要用 binary 类型
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

/* generate a download */
function s2ab(s) {
  const 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;
}

FileSaver
  .saveAs(
    new Blob([s2ab(wbout)], {
      type: 'application/octet-stream',
    }),
    '激活码.xlsx');

要点总结

• 常用的 JS 库，在官网或者 StackOverflow 之类的地方往往都能找到实际用例，搜索一下然后照着自己的需求改改就 OK 了，善用搜索能节省很多时间。