js 处理 Excel 文件

本插件综合了 node-xlsx 和 xlsx-style，解决了两个插件之间的冲突，支持读写 xlsx 文件的同时，也支持设置简单的样式（目前仅支持 node 服务端的读写操作，不支持浏览器端，请按需选择）。

* 本文仅讲解了示例代码中用到的一些参数，更多参数可直接参考 xlsx-style 文档

一、更新历史

2021-12-02 更新点：

1. 优化了读方法 `parseToHtml`，增加了两个配置参数 `tableStyle` 和 `tdStyle`，可以配置读出表格的样式；
2. 新增了 读方法 `parseToJson`，支持将 `xlsx` 文件读成带简单参数的 `json` 数据；
3. 将源码进行压缩；

2021-12-01 正式版第一版：1.1.0 发布。

2021-11-29 发现bug，处理中。。。

2021-11-25 修复几个源码bug，补充 readme 文档；

2021-11-24 第一次发布，测试；

二、安装：

1npm install --save-dev js-xlsx-style-node

三、写 xlsx 文件：

1. 先写一个简单数据表格：

   1const fs = require('fs');
   2const path = require('path');
   3
   4/*
   5 本 demo 是在目录下相对路径引用的 XLSX ，使用者直接替换成 node_modules 引用路径即可:
   6 const XLSX = require('js-xlsx-style-node').default;
   7*/
   8const = require('../index.js').default;
   9
   10/*
   11 数据格式是一个二维数组，每一个数据代表一行
   12*/
   13let data = [
   14  [1,2,3],
   15  [4,5,6],
   16  [7,8,9]
   17]
   18
   19let buffer = XLSX.build([
   20  {name: "Sheet111", data: data}
   21]);
   22
   23fs.writeFileSync('123.xlsx',buffer);

   效果图：

   

   一个简单的表格就这样诞生了！

2. 然后，再给表格增加点简单的样式，设置一下简单的列宽、行高、合并单元格等（通过 options 参数设置）：

   1const fs = require('fs');
   2const path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5let data = [
   6  ['这是一个自定义表格'],
   7  [1,2,3],
   8  [4,5,6],
   9  [7,8,9]
   10];
   11
   12let options = {
   13  '!cols': [     
   14    { wpx: 50 }, 
   15 { wpx: 50 }, 
   16 { wpx: 60 }, 
   17  ],
   18  '!rows':[      
   19    { hpx: 30 },
   20 { hpx: 30 },
   21 { hpx: 40 },
   22 { hpx: 50 },
   23  ],
   24  '!merges':[
   25    {
   26   s:{
   27     c:0,
   28   r:0,
   29   },
   30   e:{
   31   c:2,
   32   r:0
   33   }
   34 }
   35  ],
   36};
   37
   38let buffer = XLSX.build([
   39  {name: "Sheet111", data: data, options}
   40]);
   41
   42fs.writeFileSync('123.xlsx',buffer);

   效果图：

   

   参数都是啥意思呢？听我给你娓娓道来：

   • '!cols' 列宽，数组格式，数组每一项代表一列，列宽单位 wpx（像素）或 wch（厘米）；

   • '!rows' 行高，数组格式，数组每一项代表一行，行高单位 hpx（像素）或 hpt（磅）；

   • '!merges' 合并单元格，数组格式，每一项代表一个合并规则，s 代表合并的起始位置，e 代表合并的结束位置，c 代表列，r 代表行，示例中的合并单元格起始位置是：{c:0,r:0}，表示第一行第一列。结束位置是：{c:2,r:0}，表示第一行第三列。最终合并的效果就是那个表头了。

3. 接下来，再给表格增加更丰富样式：字体、字号、颜色、居中、背景色等：

   1const fs = require('fs');
   2const path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5/*
   6 表格样式
   7*/
   8let cellStyle = {
   9  font: {
   10    sz: 14,
   11    bold: true,
   12  },
   13  alignment: {
   14    horizontal: "center",
   15    vertical: "center",
   16  },
   17};
   18
   19/*
   20 数据格式是一个二维数组，每一个数据代表一行
   21*/
   22let data = [
   23  [
   24    {
   25      v: '这是一个自定义表格',
   26      s: {
   27        font: {
   28          name: 'Microsoft YaHei',  // 字体
   29          sz: 15,                   // 字号
   30          color: {                  // 颜色
   31            rgb: 'FF0000',  
   32          },
   33          bold: true,               // 加粗
   34          underline: true,          // 下划线
   35          italic: true,             // 斜体
   36          strike: true,             // 删除线
   37          // outline:true,       // 轮廓（无效）
   38          // shadow:true,      // 阴影（无效）
   39          // vertAlign:true,   // 垂直对齐方式(例如大字小字同时存在时，文字的对其基准)（无效）
   40        },
   41        alignment: {
   42          horizontal: "center",     // 水平居中
   43          vertical: "center",       // 垂直居中
   44          wrapText: true,           // 自动换行（默认不换行）
   45          // readingOrder:'2',     // 阅读顺序（1、2没看出来有什么不同，貌似无效）
   46          // textRotation:30,    // 文本旋转角度（没啥用的东东）
   47        },
   48        fill: {
   49          patternType: 'solid',     // 默认 solid，设为 none 时，fgColor 失效
   50          bgColor: {                // 无效
   51            rgb: "0000FF",
   52          },
   53          fgColor: {                // 背景色
   54            theme: "2",
   55            tint: "-0.25"
   56          }
   57        }
   58      }
   59    }
   60  ], 
   61  [
   62    {
   63      v: 1,
   64      s: cellStyle
   65    },
   66    {
   67      v: 2,
   68      s: cellStyle
   69    },
   70    {
   71      v: 3,
   72      s: cellStyle
   73    }
   74  ], 
   75  [
   76    {
   77      v: 4,
   78      s: cellStyle
   79    },
   80    {
   81      v: 5,
   82      s: cellStyle
   83    },
   84    {
   85      v: 6,
   86      s: cellStyle
   87    }
   88  ], 
   89  [
   90    {
   91      v: 7,
   92      s: cellStyle
   93    },
   94    {
   95      v: "百度一下",
   96      l: {
   97        Target: 'https://www.baidu.com',
   98        Tooltip: '这是一个 hover 提示',
   99      },
   100      s: {
   101        font: {
   102          color: {
   103            rgb: '0000FF',
   104          },
   105          underline: true,
   106        },
   107        alignment: cellStyle.alignment,
   108      }
   109    },
   110    {
   111      v: 36841,
   112      t: 'd',
   113      s: {
   114        ...cellStyle,
   115        numFmt: 'yyyy-mm-dd'
   116      }
   117    }
   118  ]
   119];
   120
   121let options = {
   122  '!cols': [
   123    { wpx: 50 },
   124    { wpx: 50 },
   125    { wpx: 120 },
   126  ],
   127  '!rows': [
   128    { hpx: 30 },
   129    { hpx: 30 },
   130    { hpx: 40 },
   131    { hpx: 50 },
   132  ],
   133  '!merges': [
   134    {
   135      s: {
   136        c: 0,
   137        r: 0,
   138      },
   139      e: {
   140        c: 2,
   141        r: 0
   142      }
   143    }
   144  ],
   145};
   146
   147let buffer = XLSX.build([
   148  {name: "Sheet111", data: data, options}
   149]);
   150
   151fs.writeFileSync('123.xlsx', buffer);

   效果图：

   

具体参数含义就不一一解释了，看代码里的备注就行了，这里说几个注意事项：

• 给表格添加样式时，数据格式由简单的数组格式 [1,2,3] 变成了对象数组格式 [ {v:1,s:cellStyle},{v:2,s:cellStyle},{v:3,s:cellStyle}]，注意，每一个单元格项都变成这样的格式！各参数含义如下：
  • v：原始值；
  • t：内容类型，s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等；
  • f：单元格公式，如B2+B3；
  • h：HTML内容；
  • w：格式化后的内容；
  • r：富文本内容 rich text；
  • l：单元格超链接对象，l.Target 表示链接，l.Tooltip 表示鼠标 hover 上去时的提示。注意：Target 和 Tooltip 首字母大写！！官网 tooltip 首字母是小写，但是亲测不生效！！！
  • s：单元格样式/主题；
• 最后一个单元格，那是一个日期，值代表的是距离 1900年1月1日（为什么是这一天，本人查来查去也没找到什么合理的解释，姑且猜测可能是因为这是 20 世纪开始的日子吧🤣）的天数（我们通常用的时间戳，是距离1970年1月1日的秒数或毫秒数）。本插件读取 xlsx 文件时，日期读出的数据就是这样的格式。通过 s 参数下的 numFmt 属性可以将其格式化成正常的日期格式。

4. 另外，再介绍一些插件的其他方法：

   • 上面示例中，写文件时先调用 XLSX.build，再调用 fs.writeFileSync；也可以直接调用 XLSX.write 达到同样的效果：

     1let buffer = XLSX.build([
     2  {name: "Sheet111", data: data, options}
     3]);
     4fs.writeFileSync('123.xlsx', buffer);

     等同于：

     1/* 同步写 */
     2XLSX.write('123.xlsx',[{name: "Sheet111", data: data, options}]) 

     或者：

     1/* 异步写 */
     2XLSX.writeAsync('123.xlsx',[{name: "Sheet111", data: data, options}],{/* 多个 sheet 共用的设置*/},()=>{
     3  console.log('这是异步写方法的回调~')
     4}) 

   • 一个 xlsx 文件可能包含多个 sheet 表，同时写多个 sheet 只需在数组中多加几组数据即可：

     1let buffer = XLSX.build([
     2  {name: "Sheet1", data: data1, options1},
     3  {name: "Sheet2", data: data2, options2},
     4  {name: "Sheet3", data: data3, options3},
     5  {name: "Sheet4", data: data4, options4},
     6]);
     7fs.writeFileSync('123.xlsx', buffer);

   • 本插件默认封装了几个方法，想调用原插件更多方法，可直接引用原插件的 XLSX 对象，但是建议不要用，因为可能会产生某种未知错误：

     

     1const XLSX = require('js-xlsx-style-node')._XLSX;

   • 关于 options 里的参数，小编试了 cellDates、tabSelected、showGridLines、bookSST等参数，但是都没看出来有什么作用，可能是小编太笨了，就交给大家自己去研究吧。

5. “写” 方法小结

   ​ 以上示例，涵盖了写 xlsx 文件的基本内容。我们日常写 xlsx 文件操作，无论你原本的数据是什么样的，只要按照示例中的格式将数据格式化，然后再调用插件方法，就可以生成一个带样式的表格了。有些属性，小编亲测无效；有些属性，小编测试完之后没发现什么变化，也不清楚有没有效果。更多更细致的用法，还请各位看官老爷们自己深挖吧~

四、读 xlsx 文件：

源 xlsx 文件截图：

1. 读成精简的 json 格式（会丢弃超链接、合并单元格等信息，仅保留数据）：

   1var fs = require('fs');
   2var path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5let ws = XLSX.parse(path.resolve(__dirname,'read.xlsx'),{
   6 // 保留时间格式（此属性有效，不配置此参数，日期格式会默认读成距离 1900年1月1日的天数）
   7 cellDates:true,
   8});
   9console.log(ws[0].data)

   得到的数据：

   

   注：由于这个方法并未保留表格样式和超链接（实际上小编尝试了原插件里的各种方法，都没有保留样式和超链接的方式），所以我个人感觉一般用不上。

2. 读成 html 格式：

   1var fs = require('fs');
   2var path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5let ws = XLSX.parseToHtml(path.resolve(__dirname,'read.xlsx'),{
   6 cellDates:true,     
   7 header:'',
   8 footer:'',
   9});
   10
   11console.log(ws)
   12

   可通过参数 header、footer 来添加 html 头尾：

   效果图：

   

   

   • header 和 footer 为空时，得到的是一个 table 标签 html 片段；

   • 直接不配置 header 和 footer 参数时，得到的就是一个完整的 html 代码；

   • header 和 footer 配置值时，就以配置的字符串分别加载 table 片段的首尾；（这样配置自认为没啥实际用处）；

   新建一个 html 文件，将代码复制进去，然后从浏览器打开看效果：

   

   

   ​ 可以看到，默认没有边框样式，比较丑，无法容忍。于是，小编忍痛再度修改源码，给表格添加一些样式支持，增加了 tableStyle 和 tdStyle 两个配置，修改之后：

   1var fs = require('fs');
   2var path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5let ws = XLSX.parseToHtml(path.resolve(__dirname,'read.xlsx'),{
   6	cellDates:true,		
   7	// header:'',
   8	// footer:'',
   9	tableStyle:{
   10		"border-collapse":'collapse',
   11	},
   12	tdStyle:{
   13		"border":"1px solid #000"
   14	}
   15});
   16console.log(ws)

   

   啥也不说了，请让我听到你们的掌声！💕

3. 读成格式化的 json 数据（保留了超链接和合并单元格信息）：

   1var fs = require('fs');
   2var path = require('path');
   3const XLSX = require('../index.js').default;
   4
   5let ws = XLSX.parseToJson(path.resolve(__dirname,'read.xlsx'),{
   6	cellDates:true,		
   7});
   8console.log(ws[0])

   数据如下：

   

   ​

   这个方法就是小编自己顺手加的，怕有人有这种需要。

4. “读”小结

   ​ 小编在读 xlsx 文件时，尝试了源插件里的各种方法，都没有得到带样式的数据。对于示例中的两种方法，在没有超链接的情况下，两者可以根据需要自行选择。但是有超链接的话，可能只能用读成 html 的方式了，因为 json 格式会导致超链接丢失。都不怎么好用，但是实在能力和时间有限，暂时也只能做到这样了😒。

全文总结：

本插件是在网上别的插件的基础上改的，改造之前，小编也试过直接用网上现有的一些插件，但都或多或少有点问题，满足不了需求：

1. js-xlsx\node-xlsx 不能设置样式；

2. xlsx-style 自己不能写文件，结合 js-xlsx\node-xlsx 还得处理源码冲突；

3. 好不容易找了一个能写样式的，还不支持写入超链接。。。

4. 等等

   最后，被逼无奈，只能硬着头皮看看源码，最终重要把样式和超链接的问题解决了，算是满足了一个表格的基本需求了。同时，还根据实际需要，给插件增加了几个读写方法，方便更多场景的使用。但是，由于时间和能力的问题，一些源文件里的方法和参数没有弄懂，所以也给大家遗留了很多困惑，对此，小编深感抱歉！美中不足，希望能给大家带来一点点帮助！

GitHub 地址：

https://github.com/ZhaoruiGuang/js-xlsx-style-node

人生艰难，撸码不易，您的支持是作者坚持下去的最大动力。

如果项目给您带来了一点便利或帮助，请留个star鼓励一下哟~~~❤️❤️❤️❤️❤️❤️

如有问题，可邮件( 940139936@qq.com )与作者交流。