New Git https://git.sheetjs.com/SheetJS/sheetjs
Old Git https://github.com/SheetJS/sheetjs
image.png
在线导出案例 https://sheetjs.com/demo/table.html
在线文档
https://docs.sheetjs.com/docs
Github https://github.com/SheetJS/docs.sheetjs.com
image.png

相关 excel
https://github.com/protobi/js-xlsx/

canvas-datagrid

xlsx cdn

一般情况下用 xlsx.core.min.js 就够了，xlsx.full.min.js 则是包含了所有功能模块
image.png

  1. // pnpm add xlsx
  3. https://unpkg.com/browse/xlsx@0.18.5/
  4. https://unpkg.com/browse/xlsx@0.18.5/dist/xlsx.core.min.js

read

read(data, {type: ‘binary’}) 解析data数据 解析的类型， type 类型

  • base64: 以base64方式读取；
  • binary: BinaryString格式(byte n is data.charCodeAt(n))
  • string: UTF8编码的字符串；
  • buffer: nodejs Buffer；
  • array: Uint8Array，8位无符号数组；
  • file: 文件的路径（仅nodejs下支持

js 读取 xlsx 参考
http://blog.haoji.me/js-excel.html#dao-chu-excel

  1. // 读取本地 excel文件
  2. function readWorkbookFromLocalFile(file, callback) {
  3.     const reader = new FileReader();
  4.     reader.onload = function(e) {
  5.         const data = e.target.result;
  6.         const workbook = XLSX.read(data, {type: 'binary'});
  7.         if(callback) callback(workbook);
  8.     };
  9.     reader.readAsBinaryString(file);
  10. }

workbook

  1. // 将workbook装化成blob对象
  2. function workbook2blob(workbook) {
  3.   // 生成excel的配置项
  4.   var wopts = {
  5.     // 要生成的文件类型
  6.     bookType: "xlsx",
  7.     // // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  8.     bookSST: false,
  9.     type: "binary"
  10.   };
  11.   var wbout = XLSX.write(workbook, wopts);
  12.   // 将字符串转ArrayBuffer
  13.   function s2ab(s) {
  14.     var buf = new ArrayBuffer(s.length);
  15.     var view = new Uint8Array(buf);
  16.     for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  17.     return buf;
  18.   }
  19.   var blob = new Blob([s2ab(wbout)], {
  20.     type: "application/octet-stream"
  21.   });
  22.   return blob;
  23. }
  25. // 将blob对象创建bloburl，然后用a标签实现弹出下载框
  26. function openDownloadDialog(blob, fileName) {
  27.   if (typeof blob == "object" && blob instanceof Blob) {
  28.     blob = URL.createObjectURL(blob); // 创建blob地址
  29.   }
  30.   var aLink = document.createElement("a");
  31.   aLink.href = blob;
  32.   // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，有时候 file:///模式下不会生效
  33.   aLink.download = fileName || "";
  34.   var event;
  35.   if (window.MouseEvent) event = new MouseEvent("click");
  36.   //   移动端
  37.   else {
  38.     event = document.createEvent("MouseEvents");
  39.     event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  40.   }
  41.   aLink.dispatchEvent(event);
  42. }
  44. let sheet1data = [{ department: "行政部", count: 2 }, { department: "前端部", count: 2 }];
  45. let sheet2data = [{ name: "张三", do: "整理文件" }, { name: "李四", do: "打印" }];
  46. let sheet3data = [{ name: "张大人", do: "vue" }, { name: "李大人", do: "react" }];
  48. var sheet1 = XLSX.utils.json_to_sheet(sheet1data);
  49. var sheet2 = XLSX.utils.json_to_sheet(sheet2data);
  50. var sheet3 = XLSX.utils.json_to_sheet(sheet3data);
  52. /* create a new blank workbook */
  53. var wb = XLSX.utils.book_new();
  54. XLSX.utils.book_append_sheet(wb, sheet1, "部门统计");
  55. XLSX.utils.book_append_sheet(wb, sheet2, "行政部");
  56. XLSX.utils.book_append_sheet(wb, sheet3, "前端部");
  57. const workbookBlob = workbook2blob(wb);
  58. openDownloadDialog(workbookBlob, `部门统计.xlsx`);

Sheets

  1. const { Sheets, SheetNames } = workbook
  3. // 第一个 sheet
  4. Sheets[SheetNames[0]]