js-xlsx excel导出学习记录2 样式

上一次已经初步学会了通过workbook配置,实现简单excel导出,但是excel不是简单的表格光有数据就完了,如果是那样我直接用逗号分隔符创建csv就好了。
这次,我来看看如何实现样式,我要实现的功能有

1.单元格合并
2.列宽设置
3.样式设置 对齐方式 字体/背景颜色 边框

我先用excel做了包含这些功能的简单范本,最终希望用js-xlsx重现


但是经过尝试,已经确认SheetJS/xlsx 导出excel时cells样式配置是无效的,他们提供了一个Pro Version
,似乎只有使用这个专业版才能实现这个功能。

不过我很快找到了替代品 protobi/js-xlsx

npm install xlsx-style

斯巴达,我的项目一引用这个包就无法正常运行了


会抛出这个错误,不知道是这个包有问题还是我的环境有问题,已经尝试在项目上安装fs dev也安装fs依然没解决。

使用protobi/js-xlsx

我只能采用传统页面加载方式来使用,从他们的git上clone了项目,在页面上加载xlsx.core.min.js文件,因为用前端加载,同时也要引入Blobfile-saver ,我在搜索引擎上找到了一个简单的函数来实现 file-saver 的功能,当前项目代码如下

<script type="text/javascript" src="./xlsx-style/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="./Blob.js"></script>

<script>
  const saveAs = (obj, fileName)=>{
    const a = document.createElement('a');
    a.download = fileName || '下载';
    a.href = URL.createObjectURL(obj);     
    a.click();                           
    setTimeout(()=> {                     
      URL.revokeObjectURL(obj);     
    }, 100);
  };

  const s2ab = s => {
    let buf = new ArrayBuffer(s.length);
    let view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
  };

  const workbook = {   //本次学习只对这个对象做修改,其他代码块保持不动
    SheetNames: ['Sheet1'],
    Sheets: {
      Sheet1: {
      }
    }
  };

  const workbookOut = XLSX.write(workbook, {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary'
  });

  saveAs(new Blob([s2ab(workbookOut)], {
    type: 'application/octet-stream'
  }), 'export.xlsx')

</script>

因为只是学习测试,我直接用简练的es6语法,实现功能为主,不考虑浏览器兼容性问题

1.单元格合并sheet['!merges']

回顾官方文档,sheet提供了一个配置项!merges用来实现单元格合并
使用之前先了解它的用法,sheet['!merges']接受一个数组参数,数组对象的格式如下

[
  {
    s: { //s start 开始
      c: 1,//cols 开始列
      r: 0 //rows 开始行
    },
    e: {//e end  结束
      c: 4,//cols 结束列
      r: 0 //rows 结束行
    }
  }
]

为了实现合并A1:D1我给sheet['!merges']增加对应配置,现在的workbook如下

const workbook = {
  SheetNames: ['Sheet1'],
  Sheets: {
    Sheet1: {
      '!ref': 'A1:D4',
      '!merges': [{
        s: {c: 0, r: 0},
        e: {c: 3, r: 0}
      }],
      A1: {v: '采购单', t: 's'},
    }
  }
};

运行导出,成功


2.列宽设置 sheet['!cols']

sheet提供了一个配置项!cols用来实现设置列宽

[          
  {
    hidden? : boolean, //列的显示true或隐藏false
    /* column width is specified in one of the following ways: */
    wpx? : number, // 列宽 单位是像素
    width? : number,  // width in Excel's "Max Digit Width", width*256 is integral
    wch? : number,  // width in characters
    /* other fields for preserving features from files */
    MDW? : number,  // Excel's "Max Digit Width" unit, always integral
  }
]

我的示例中的单元格宽度是 45px 165px 45px 45px
配置一下
'!cols': [{wpx: 45}, {wpx: 165}, {wpx: 45}, {wpx: 45}]
运行导出


可以看到列宽有被正确配置,但是产生的宽度是 51px 189px 51px 51px,虽然有误差,不过配置项有效,误差原因就不深究了

清注意,下面的功能由xlsx-style实现 ,对xlsx无效

样式配置表

样式属性 子属性 参数
fill patternType "solid" or "none"”
fgColor COLOR_SPEC
bgColor COLOR_SPEC
font name "Calibri" // default
sz "11" // font size in points
color COLOR_SPEC
bold true or false
underline true or false
italic true or false
strike true or false
outline true or false
shadow true or false
vertAlign true or false
numFmt "0" // integer index to built in formats, see StyleBuilder.SSF property
"0.00%" // string matching a built-in format, see StyleBuilder.SSF
"0.0%" // string specifying a custom format
"0.00%;\(0.00%\);\-;@" // string specifying a custom format, escaping special characters
"m/dd/yy" // string a date format using Excel's format notation
alignment vertical "bottom" or "center" or "top"
horizontal "bottom" or "center" or "top"
wrapText true or false
readingOrder 2 // for right-to-left
textRotation Number from 0 to 180 or 255 (default is 0)
90 is rotated up 90 degrees
45 is rotated up 45 degrees
135 is rotated down 45 degrees
180 is rotated down 180 degrees
255 is special, aligned vertically
border top { style: BORDER_STYLE, color: COLOR_SPEC }
bottom { style: BORDER_STYLE, color: COLOR_SPEC }
left { style: BORDER_STYLE, color: COLOR_SPEC }
right { style: BORDER_STYLE, color: COLOR_SPEC }
diagonal { style: BORDER_STYLE, color: COLOR_SPEC }
diagonalUp true or false
diagonalDown true or false

COLOR_SPEC: 填充、字体和边框的颜色对象:

  • { auto: 1}指定自动值
  • { rgb: "FFFFAA00" } 指定16进制的ARGB
  • { theme: "1", tint: "-0.25"} 指定主题颜色和色调的整数索引(默认值为0)
  • { indexed: 64} 默认值 fill.bgColor

BORDER_STYLE: 边框样式是一个字符串值,它可以是以下值之一:

  • thin
  • medium
  • thick
  • dotted
  • hair
  • dashed
  • mediumDashed
  • dashDot
  • mediumDashDot
  • dashDotDot
  • mediumDashDotDot
  • slantDashDot

2.样式设置

我的测试范例中标题“采购单”是水平居中对齐,18号加粗字体
给A1增加对应配置

A1: {
  v: '采购单',
  t: 's',
  s: {
    font: {
      sz: 18,                //18号字体
      bold: true             //加粗
    },
    alignment: {
      horizontal: 'center'   //水平居中对其
    }
  }
}

运行导出


配置有效!我很快就按配置表写出下面的workbook

const borderAll = {  //单元格外侧框线
  top: {
    style: 'thin'
  },
  bottom: {
    style: 'thin'
  },
  left: {
    style: 'thin'
  },
  right: {
    style: 'thin'
  }
};

const workbook = {
  SheetNames: ['Sheet1'],
  Sheets: {
    Sheet1: {
      '!ref': 'A1:D4',
      '!cols': [{wpx: 45}, {wpx: 165}, {wpx: 45}, {wpx: 45}],
      '!merges': [{
        s: {c: 0, r: 0},
        e: {c: 3, r: 0}
      }],
      A1: {
        v: '采购单',
        t: 's',
        s: {
          font: {
            sz: 18,
            bold: true
          },
          alignment: {
            horizontal: 'center'
          }
        }
      },
      A2: {
        v: '序号',
        t: 's',
        s: {
          border: borderAll
        }
      },
      B2: {
        v: '商品名称',
        t: 's',
        s: {
          border: borderAll
        }
      },
      C2: {
        v: '数量',
        t: 's',
        s: {
          border: borderAll
        }
      },
      D2: {
        v: '颜色',
        t: 's',
        s: {
          border: borderAll
        }
      },
      A3: {
        v: 1,
        t: 'n',
        s: {
          border: borderAll
        }
      },
      B3: {
        v: '商品1',
        t: 's',
        s: {
          border: borderAll
        }
      },
      C3: {
        v: 100,
        t: 'n',
        s: {
          border: borderAll,
          font: {
            color: {
              rgb: 'FF4F81BD'  //字体颜色
            }
          }
        }
      },
      D3: {
        v: '',
        s: {
          border: borderAll,
          fill: {
            fgColor: {
              rgb: 'FFC0504D'  //背景颜色
            }
          }
        }
      }
    }
  }
};

运行



到此,本次对使用js-xlsx导出excel的学习基本告一段落,可以准备投入生产了