file-saver

一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用程序

browser-fs-access

Excel 文件 导入导出

该库封装了 File_System_Access_API，该 API 为开发者提供了 读、写文件和文件管理 的能力。

js-xlsx

一个强大的解析、编写excel文件的库，地址：https://github.com/SheetJS/sheetjs

安装

  1. npm install js-xlsx

🙌 🌰 导出excel

  1. import XLSX from "xlsx";
  2. /**
  3.  * @description 将一个sheet转成最终的excel文件的blob对象
  4.  * @param {XLSX.utils.json_to_sheet} sheet
  5.  * @returns {String} sheetName
  6.  */
  7. export function sheetToBlob(sheet, sheetName) {
  8.     sheetName = sheetName || "sheet1";
  9.     var workbook = {
  10.         SheetNames: [sheetName],
  11.         Sheets: {},
  12.     };
  13.     workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
  15.     var wopts = {
  16.         bookType: "xlsx", // 要生成的文件类型
  17.         bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  18.         type: "binary",
  19.     };
  20.     var wbout = XLSX.write(workbook, wopts);
  21.     var blob = new Blob([s2ab(wbout)], {
  22.         type: "application/octet-stream",
  23.     }); // 字符串转ArrayBuffer
  24.     function s2ab(s) {
  25.         var buf = new ArrayBuffer(s.length);
  26.         var view = new Uint8Array(buf);
  27.         for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  28.         return buf;
  29.     }
  30.     return blob;
  31. }
  33. /**
  34.  * @description 将sheetToBlob转化的blob对象利用URL.createObjectURL下载为excel文件
  35.  * @param {ArrayBuffer} blob 
  36.  * @returns {String} saveName
  37.  */
  38. export function downloadExcel(blob, saveName) {
  39.     if (typeof blob == "object" && blob instanceof Blob) {
  40.         var url = URL.createObjectURL(blob); // 创建blob地址
  41.     }
  42.     var aLink = document.createElement("a");
  43.     aLink.href = url;
  44.     aLink.style.display = "none";
  45.     aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  46.     document.body.appendChild(aLink);
  47.     aLink.click();
  48.     document.body.removeChild(aLink); //下载完成移除元素
  49.     window.URL.revokeObjectURL(url); //释放掉blob对象
  50. }

ExcelJS

https://juejin.cn/post/7071882317953761316#heading-20

Export2Excel

vue-element-admin 中基于 js-xlsx 封装的库。

image.png

D2 Projects 表格插件

D2 Admin 中封装的表格导入导出插件。文档地址：https://d2.pub/zh/doc/d2-admin/plugin/data-export.html#%E5%AE%89%E8%A3%85

handsontable

https://github.com/handsontable/handsontable
强大的开源 HTML5 表格处理工具，适用于中后台的很多业务场景。API 方便、扩展性好、可操作性强，与Execl 等表格处理程序兼容好。并支持非常丰富的操作，如数据绑定、验证、排序及强大的上下文菜单。

生成海报

image.png