前言：之前导出的excel都是一个excel中只有一个表格            ，在这次开发中  
 
  
 
  
 
  
 
  
 
  
 
  ，要实现的功能是一个项目中有三个表格












，而且单元格还要设置不同的样式
  
  
  
  
  
  
，遇到了很多问题  
  
  
  
  
  
 ，特意记录
  
  
  
  
  
  
 。

内容大纲如下：

目录

一
  
  
  
  
  
  
 、选择插件

二 
  
  
  
  
  
 、创建工作簿对象

三 


 


 


 


 


 


 
、设置样式

1. 合并单元格

 2. 设置单元格公共样式

3.单元格设置边框

4.设置列宽

5.在单元格中设置斜线

一
 
 
 
 
 
 
、选择插件

最开始
 


 


 


 


 


 


 ，我们要根据是否需要自己设置样式选择好插件：

由于我们导出的是excel文件
 
 
 
 
 
 
，所以要使用xlsx插件

npm i xlsx

 其次   
   
   
   
   
   
 ，要对单元格样式进行更改
 

 

 

 

 

 

 ，所以这次使用的是xlsx-style 插件

npm i xlsx-style

准备就绪

 

 

 

 

 

 
，将这两个插件引入到js文件中

import * as XLSX from xlsx import XLSX2 from xlsx-style

二  
   
   
   
   
   
  、创建工作簿对象

1. 创建一个工作簿对象：（table1和table2是表数据             ，是[[, , ], [, , ], [, , ]]的格式）

var wb = XLSX.utils.book_new() // 工作簿对象包含一SheetNames数组
 
 

 
 

 
 

 
 

 
 

 
 

 ，以及一个表对象映射表名称到表对象












，XLSX.utils.book_new使用函数创建一个新的工作簿对象 var ws_name = SheetJS // 给工作表命名 var workbook = XLSX.utils.aoa_to_sheet(table1) // 定义工作表                   ，并在里边添加第一个表格 XLSX.utils.sheet_add_aoa(workbook, table2, { origin: B1 }) // 向工作表中追加一个表格 
 
 
 
 
 
 
 
 
 
 
 
 ，并设置从哪个单元格开始 XLSX.utils.book_append_sheet(wb, workbook, ws_name) // 合成工作簿



















，向工作簿中添加命名为wa_name的工作表

 这时            ，我们就可以生成基础的工作簿对象 
  
  
  
  
  
 。

工作簿中的工作表对象  
 
  
 
  
 
  
 
  
 
  
 
  ，这个对象中每个不以!开头的属性












，都代表一个单元格 


 


 


 


 


 


 
。

三 

 

 

 

 

 

 
、设置样式

1. 合并单元格

工作表中的 !merges字段存储的是合并的单元格
  
  
  
  
  
  
，我们可以自定义要合并的单元格  
  
  
  
  
  
 ，并把它放进去
 
 
 
 
 
 
。

// 定义要合并的单元格 var merges = [ A20:E21, A1:A3, B1:R3, S1:V3, A4:V4, A5:E5, A13:E13, G5:H5, G6:G9, G10:G13, G14:G17, G18:G21, A6:A7, B6:B7, C6:D7, V6:V7, H6:H7, I6:I7, J6:J7, K6:K7, L6:L7 ] // 将要合并的单元格放进工作表中 if (merges.length > 0) { if (!workbook[!merges]) workbook[!merges] = [] merges.forEach(item => { workbook[!merges].push(XLSX.utils.decode_range(item)) }) }

 2. 设置单元格公共样式

单元格的样式都存储在workbook[key].s中
 


 


 


 


 


 


 ，我们可以在设置完公共样式后单独再设置某些单元格的样式  
   
   
   
   
   
  。

let borderAll = { // 单元格外侧框线 top: { style: thin, color: { rgb: 000000 } }, bottom: { style: thin, color: { rgb: 000000 } }, left: { style: thin, color: { rgb: 000000 } }, right: { style: thin, color: { rgb: 000000 } } } // 设置公共样式 if (workbook[key] instanceof Object) { workbook[key].s = { border: borderAll, // 边框样式设置 alignment: { // 文字样式设置 horizontal: center, // 字体水平居中 vertical: center, // 垂直居中 wrapText: 1 // 自动换行 }, fill: { //背景色 fgColor: { rgb: C0C0C0 } }, font: { // 单元格中字体的样式与颜色设置 sz: 10, color: { rgb: 000000 }, bold: false }, bold: true, numFmt: 0 } }

3.单元格设置边框

给某个单元格设置边框

if (key === A1) { workbook[key].s.border = { top: { style: thin, color: { rgb: FFFFFF } }, bottom: { style: double, color: { rgb: 3E87C8 } }, left: { style: thin, color: { rgb: FFFFFF } }, right: { style: thin, color: { rgb: FFFFFF } } } }

边框的样式：

thin

medium

thick

dotted

hair

dashed

mediumDashed

dashDot

mediumDashDot

dashDotDot 

mediumDashDotDot

slantDashDot

double

4.设置列宽

单元格的列宽用的是  !cols  属性
 
 
 
 
 
 
，列的顺序是从左向右   
   
   
   
   
   
 ，从0开始

if (!workbook[!cols]) workbook[!cols] = [] for (var i = 0; i <= 21; i++) { if (i === 0 || i === 1 || i === 4 || i === 7) { workbook[!cols][i] = { wpx: 60 } } else if (i === 2 || i === 3) { workbook[!cols][i] = { wpx: 25 } } else { workbook[!cols][i] = { wpx: 50 } } }

5.在单元格中设置斜线

斜线的方向与斜线的样式必须同时使用
 

 

 

 

 

 

 ，不然没有效果

斜线方向：

diagonalDown：对角线向下方向

diagonalUp: 对角线向上方向 if (key === A6) { workbook[key].s.border = { top: { style: thin, color: { rgb: 000000 } }, bottom: { style: thin, color: { rgb: 000000 } }, left: { style: thin, color: { rgb: 000000 } }, right: { style: thin, color: { rgb: 000000 } }, diagonalDown: true, // 斜线方向 diagonal: { // 斜线样式 color: { rgb: 000000 }, style: thin } } }