前端实现生成带有样式的excel表格 Node和浏览器读写Excel文件探究实践

最近碰到个须要自动生成表格的任务，做为前端的我，就想在 node 和浏览器中生成强大的表格，因此特此研究了不少关于表格的 npm 库

支持读写 Excel 的 node.js 模块

• node-xlsx: 基于 Node.js 解析 excel 文件数据及生成 excel 文件，仅支持 xlsx 格式文件
• js-xlsx: 目前 Github 上 star 数量最多的处理 Excel 的库，支持解析多种格式表格 XLSX / XLSM / XLSB / XLS / CSV，解析采用纯 js 实现，写入须要依赖 nodejs 或者 FileSaver.js 实现生成写入 Excel，能够生成子表 Excel，功能强大，但上手难度稍大。不提供基础设置 Excel 表格 api 例单元格宽度，文档有些乱，不适合快速上手；普通版本不支持定义字体、颜色、背景色等，有这个功能须要的可使用 pro 版，是要联系客服收费的，害我照着 API 设置调试了好屡次都失败。好在样式设置问题有一些教程，经过研究本人已解决，可设置宽度颜色等等，见根目录本人修改的 xlsx.js
• xlsx-style 基于 xlsx 封装的样式库，能够在 xlsx 的基础上设置样式。样式不全，宽度都设置不了，好多年前做者就不维护了.宽度设置问题本人已解决了，见修改的 xlsx-style.js 文件
• exceljs 在使用此库以前，本人已花费了很大的精力，用以上库作好了表格，可是发现不能设置页眉页脚，添加图片，打印选项设置等等，直到发现了这个库，文档齐全，功能强大，而且还免费.可是star较少，差一点就错过了。本教程主要针对这个库

代码库地址

• https://github.com/lingxiaoyi/excel

安装

npm install

npm install -g nodemon

调试使用，替代 node 命令，实现保存文件，node 自动从新启动执行，必须全局安装才能运行

使用

nodemon app.js

• js-xlsx 具体 api 使用方法请参考 main.js demo 使用，app.js 中修改成 require('./src/main.js');
• exceljs 具体 api 使用方法请参考 main-exceljs.js demo 使用，app.js 中修改成 require('./src/main-exceljs.js');

由于每次生成完表格，每次都须要打开表格查看样式，在 windows 电脑中，打开表格以后就锁定不能生成新文件了，原本想着能导出一个 html 文件对应表格的样式

node 调试

vscode 中打开调试右侧设置编辑，将下方代码复制进去，点 nodemon 启动就能够进行 debug 调试了

{
      "type": "node"，
      "request": "launch"，
      "name": "nodemon"，
      "runtimeExecutable": "nodemon"，
      "program": "${workspaceFolder}/app.js"，
      "restart": true，
      "console": "integratedTerminal"，
      "internalConsoleOptions": "neverOpen"，
      "skipFiles": ["<node_internals>/**"]
    }，

webpack 目录的做用

每次生成完新表格，都须要从新打开表格查看样式，在 windows 电脑中，打开表格以后就锁定了，再次生成新表格就会报错，文件已锁定，不能写入，对于想偷懒的我，能不能实现像 webpack 热更新功能那种，修改样式 js 页面自动更新呢?

wps 自带另存 html 文件功能，可是没有提供生成的 api ，网上也搜索不到对应的转换功能，
原本觉得本身要实现一套表格转 html 的功能。经过不断尝试，偶然间发现手机浏览器能够直接打开预览 xlsx 文件，心里狂喜啊

使用方法

进入 webpack 目录安装依赖包，安装好以后执行

npm run dev

启动成功以后，会自动打开带有 ip 地址的预览地址，此时在电脑浏览器会自动下载 xlsx 文件，忽略无论，用手机直接打开此地址，就能看到 xlsx 表格的内容了，而且每次新修改内容和样式，都会自动刷新页面显示新表格.

小技巧

谷歌浏览器插件:

• 生成二维码的插件生成二维码方便手机扫描
• 划词翻译 用来翻译一些看不懂的英文文档

browser 目录

浏览器中实现生成 xlsx 表格方法

进入 browser 目录安装依赖包，安装好以后执行

npm run dev

启动成功以后，拖动根目录 src 下的李四表格到页面上的输入框里，成功生成表格以后会生成一个下载连接地址，右键在新标签页打开连接，即会生成一个新的表格文件出来，完整 api 使用和 demo 文件请参考 index.js

vue 和 react 用法能够参考此例子，若是有必要也能够此版本库的例子

一些概念

在使用这个库以前，先介绍库中的一些概念。

• workbook 对象，指的是整份 Excel 文档。咱们在使用 js-xlsx 读取 Excel 文档以后就会得到 workbook 对象。
• worksheet 对象，指的是 Excel 文档中的表。咱们知道一份 Excel 文档中能够包含不少张表，而每张表对应的就是 worksheet 对象。
• cell 对象，指的就是 worksheet 中的单元格，一个单元格就是一个 cell 对象。

xlsx 使用注意事项

constXLSX = require('xlsx'); 
let html = XLSX.utils.sheet_to_html(workbook.Sheets.Sheet1)

生成 html 的用法，而且不会有任何样式

exceljs 使用注意

读取文件问题

由于 exceljs 读取文件不支持 sync 同步读取，给的实例也是 await 例子.致使我读取完遇到一个问题，就是总是生成不成功，最后发现必需要把全部逻辑所有放入函数中，像下方这样

(async function (params) {
  let res = await workbook.xlsx.readFile(`${__dirname}/赵六.xlsx`);
  //执行全部数据处理逻辑
  //执行写的逻辑
  workbook.xlsx.writeFile(path.resolve(__dirname， '../webpack/test222.xlsx'));
});

全部逻辑所有要写入这个函数中，这样原本是能够的，可是出错调试概率较大，而且读取到的数据庞大还须要额外处理，因此我读取数据逻辑就用的 node-xlsx，十分简单方便，若是你用的 exceljs 读取文件数据出现问题，大几率是异步同步逻辑搞错了，多加注意便可

宽度设置

列宽不知道是以什么为单位，反正不是像素(已测量)，例子中是以厘米为单位再乘以 4.7 的结果设置的，4.7 是不断测试的结果.
快捷查看列宽的方法，打开 wps 表格，长按列与列字母间的竖线，就能看到列宽，取厘米的单位便可.见下图

前景色

前景色设置必须右键单元格选择设置单元格格式，而后选择图案样式选择颜色，就能够前景色填充

worksheet.getCell('A2').fill = { type: 'pattern'， pattern:'darkTrellis'， fgColor:{argb:'FFFFFF00'}， bgColor:{argb:'FF0000FF'} };

背景色

worksheet.getCell('A2').fill = { type: "pattern"， pattern: "solid"， fgColor: { argb: next.bgColor }， }

排版不一致的问题

解决 Mac 下编辑 Microsoft Office Word 文档与 Windows 排版不一致的问题，，不一样的系统用 wps 打开相同的表格，打印预览的时候，表格宽度显示不同

问题详细说明地址

个人解决办法就是 mac 下显示正常，按 mac 下的宽度来设置就能够了

参考资料

• exceljs
• node-xlsx
• js-xlsx

~
创做不易，若是对你有帮助，请给个星星 star✨✨ 谢谢，地址https://github.com/lingxiaoyi/excel~