最近业务上有数据大屏的需要，要求不仅能展现数据，同时能提供所选日期范畴的数据下载。本文纯记录实现计划作为笔记，实现细节非常不齐备。
工具库
xlsx电子表格的标准规范详见：Full XML Schema。上面两个库都基于这个标准实现了这类格式文件的读写（salute！∠(°ゝ°)）。
SheetJS
SheetJS是用于多种电子表格格局的解析器和编写器。通过官网标准、相干文档以及测试文件实现简洁的JS办法。SheetJS强调解析和编写的持重，其跨格局的特点和对立的JS标准兼容，并且ES3/ES5浏览器向后兼容IE6。
excelize
Go语言编写的能够读写电子表格类型文件的公共库
更静默：webworker
Web Worker为Web内容在后盾线程中运行脚本提供了一种简略的办法。线程能够执行工作而不烦扰用户界面。
咱们将SheetJS解决数据、生成表格数据（book类型数据）的流程另起一个线程实现。（尽管另起一个线程从体验上不会适度影响主UI线程，但自身启动老本比拟高）。
该组件的目录如下
NewDashboard
├── components
│ ├── LongCard
│ │ ├── echartsOption.ts
│ │ ├── index.tsx
│ │ └── style.module.less
│ └── ShortCard
│ ├── echartsOption.ts
│ ├── index.tsx
│ └── style.module.less
├── index.tsx # 在该文件与webworker通信
├── makeTable.ts # 在该文件实现webworker
└── style.module.lessmdn给的samples的worker都是加载内部代码的。在咱们这种组织目录下，worker应该在一个文件内实现，并导出一个worker实例。这里须要借助URL.createObjectURL(blob)结构一个外链。
代码如下：
// @file makeTable.ts
const blob = new Blob(
[
`
importScripts('https://g.alicdn.com/code/lib/xlsx/0.17.4/xlsx.full.min.js');
const GOODS_EFFECT_TITLE = [
'开播工夫',
'下播工夫',
'直播间',
'商品名称',
'商品',
'点击人数',
'成交人数',
'粉丝成交比例',
'疏导成交金额',
];
// 接管主过程的表格数据
onmessage = function({ data }) {
console.log('from main routine', data);
const book = XLSX.utils.book_new();
const sheet = XLSX.utils.aoa_to_sheet([GOODS_EFFECT_TITLE, ...data]);
XLSX.utils.book_append_sheet(book, sheet, '工作表1');
// book的数据回传给主过程
postMessage({ book });
};
`,
],
{ type: 'text/javascript' },
);
export const worker = new Worker(URL.createObjectURL(blob));留神几个点：
- 因为在worker内没有DOM、windows等对象，所以没有方法间接应用 XLSX.utils.table_to_book 办法将table元素间接导出为xlsx表格数据。
- importScript 办法是并行加载所有列出的资源，但执行是同步的。这里须要将SheetJS的资源加载进worker里。
- 主过程的办法：
// @file index.tsx
import { worker } from './makeTable';
function download() {
// aoa_to_sheet 办法须要一个二维数组来造成电子表格
worker.postMessage([[1, 2, 3]]);
worker.onmessage = ({ data }) => {
window.XLSX.writeFile(data.book, '测试.xlsx');
};
}更高速：WebAssembly
对于网络平台而言，WebAssembly具备微小的意义——它提供了一条路径，以使得以各种语言编写的代码都能够以靠近原生的速度在Web中运行。在这种状况下，以前无奈以此形式运行的客户端软件都将能够运行在Web中。
咱们应用Go语言编译为wasm文件，外围代码如下：
// wasm.go
func main() {
c := make(chan struct{}, 0)
// js全局办法makeExcel
js.Global().Set("makeExcel", js.FuncOf(jsMakeExcel))
// 确保Go程序不退出
<-c
}
func makeExcel() []uint8 {
f := excelize.NewFile()
f.SetCellValue("Sheet1", "开播工夫", now.Format(time.ANSIC))
f.SetCellValue("Sheet1", "直播间", 1111)
// 在js环境中无奈实现文件的操作
// if err := f.SaveAs("simple.xlsx"); err != nil {
// log.Fatal((err))
// }
buf, _ := f.WriteToBuffer()
res := make([]uint8, buf.Len())
buf.Read(res)
return res
}
func jsMakeExcel(arg1 js.Value, arg2 []js.Value) interface{} {
buf := makeExcel()
js_uint := js.Global().Get("Uint8Array").New(len(buf))
js.CopyBytesToJS(js_uint, buf)
//go的uint8无奈间接回传，须要创立js环境的Uint8Array类型数据并回传
return js_uint
}将编译好的wasm文件加载进js环境
- 引入桥接代码：https://github.com/golang/go/…。此时window下会有一个全局构造函数：Go
- 样板代码——实例化webassembly：
// WebAssembly.instantiateStreaming is not currently available in Safari
if (WebAssembly && !WebAssembly.instantiateStreaming) {
// polyfill
WebAssembly.instantiateStreaming = async (resp, importObject) => {
const source = await (await resp).arrayBuffer();
return await WebAssembly.instantiate(source, importObject);
};
}
const go = new Go();
fetch('path/to/wasm.wasm')
.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, go.importObject))
.then((res) => go.run(res.instance))- 实现文件下载
function download() {
// 与一般办法一样调用go写入全局的办法，拿到刚刚回传的uint8array数据
const buf = makeExcel();
// 创立下载链接，留神文件类型，并下载文件
const blob = new Blob([buf], {
type: 'application/vnd.ms-excel',
});
const url = URL.createObjectURL(blob);
console.log({ blob, str });
const a = document.createElement('a');
a.download = 'test.xlsx';
a.href = url;
a.click();
}既要又要
webworker和webassembly是能够一起应用的，待补充……
发表回复