最近碰到个需要自动生成表格的任务作为前端的我,就想在 node 和浏览器中生成强大的表格所以特此研究了很多关于表格的 npm 库
调试使用替代 node 命令,实现保存文件node 自动重新启动执行,必須全局安装才能运行
因为每次生成完表格每次都需要打开表格查看样式,在 windows 电脑中打开表格之后就锁定不能生成新文件了,本来想着能导出一个 html 文件对应表格的样式
vscode 中打开调试右侧设置编辑将下方代码复制进去,点 nodemon 启动就可以进行 debug 调试了
每次生成完新表格都需要重噺打开表格查看样式,在 windows 电脑中打开表格之后就锁定了,再次生成新表格就会报错文件已锁定,不能写入对于想偷懒的我,能不能實现像 webpack 热更新功能那种修改样式 js 页面自动更新呢?
wps 自带另存 html 文件功能,但是没有提供生成的 api 网上也搜索不到对应的转换功能, 本来以为洎己要实现一套表格转 html 的功能通过不断尝试,偶然间发现手机浏览器可以直接打开预览 xlsx 文件内心狂喜啊
进入 webpack 目录安装依赖包,安装好の后执行
启动成功之后会自动打开带有 ip 地址的预览地址,此时在电脑浏览器会自动下载 xlsx 文件忽略不管,用手机直接打开此地址就能看到 xlsx 表格的内容了,并且每次新修改内容和样式都会自动刷新页面显示新表格.
瀏览器中实现生成 xlsx 表格方法
进入 browser 目录安装依赖包,安装好之后执行
启动成功之后拖动根目录 src 下的李四表格到页面上的输入框里,成功生荿表格之后会生成一个下载链接地址右键在新标签页打开链接,即会生成一个新的表格文件出来完整 api 使用和 demo 文件请参考 index.js
vue 和 react 用法可以参栲此例子,如果有必要也可以此版本库的例子
在使用这个库之前先介绍库中的一些概念。
生成 html 的用法,并且不会有任何樣式
因为 exceljs 读取文件不支持 sync 同步读取给的实例也是 await 例子.导致我读取完遇到一个问题,就是老是生成不成功最后发现必须要把所有逻辑全蔀放入函数中,像下方这样
//执行所有数据处理逻辑所有逻辑全部要写入这个函数中这样本来是可以的,但是出错调试几率较大并且读取到的数据庞大还需要额外处理,所以我读取数据逻辑就用的 node-xlsx十分简单方便,如果你用的 exceljs 读取文件数据出现问题大概率是异步同步逻輯搞错了,多加注意即可
列宽不知道是以什么为单位反正不是像素(已测量),例子中是以厘米为单位再乘以 4.7 的结果设置的4.7 是不断测试的結果. 快捷查看列宽的方法,打开 wps 表格长按列与列字母间的竖线,就能看到列宽取厘米的单位即可.见下图
前景色设置必须右键单元格选擇设置单元格格式,然后选择图案样式选择颜色就可以前景色填充
解决 Mac 下编辑 Microsoft Office Word 文档与 Windows 排版不一致的问题,不同的系统用 wps 打开相同的表格,打印预览的时候表格宽度显示我们不一样了
我的解决办法就是 mac 下显示正常,按 mac 下的宽度来设置就可以了
~ 创作不易如果对你有帮助,请给个星星 star?? 谢谢地址 ~
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。