前端导出 excel 设置字体列宽行高对其方式合并单元格等效果

一、先看实现后的图

二、技术

这个表格主要采用了 xlsx-style 来实现

/package/xlsx-style
/protobi/js-xlsx/tree/beta

三、入门

由于 npm 和 git 上的文档都是英文，看过一遍之后就不想再看了，所以这里做一个记录。

xlsx-style 是一个纯 javascript 实现的读取和生成 excel 的 npm 包。

xlsx-style 来源于 SheetJs/xlsx，并在其非付费版上添加了很多功能，其中最主要的功能是设置 excel 的样式。

PS: 土豪就不用看了，直接使用 SheetJs/xlsx 的付费版 : )

如果大家在使用过程中有任何问题，可以去这里看看或者提交。

1、支持的文件类型

支持读取的文件类型

Excel + XML Formats (XLSX/XLSM)Excel + Binary Format (XLSB)Excel - XML Format (XML “SpreadsheetML”)Excel 97- (XLS BIFF8)Excel 5.0/95 (XLS BIFF5)OpenDocument Spreadsheet (ODS)

支持生成的文件类型

XLSXCSV (and general DSV)JSON and JS objects (various styles)

2、兼容

支持 ES5 的浏览器，如果是比较老的浏览器，需要引入 polyfill

3、安装

npm安装：

npm install xlsx-style --save

浏览器中使用：

<script lang="javascript" src="dist/xlsx.core.min.js"></script>// 只有核心包

<script lang="javascript" src="dist/xlsx.full.min.js"></script>// 包括依赖包

CDN直接引入：

/libraries/xlsx

4、读取文件

在 node 中使用

if(typeof require !== 'undefined') XLSX = require('xlsx')var workbook = XLSX.readFile('test.xlsx');/* DO SOMETHING WITH workbook HERE */

ajax 获取 excel

var url = "test_files/formula_stress_test_ajax.xlsx";var oReq = new XMLHttpRequest();oReq.open("GET", url, true);oReq.responseType = "arraybuffer";oReq.onload = function(e) {var arraybuffer = oReq.response;var data = new Uint8Array(arraybuffer);var arr = new Array();for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);var bstr = arr.join("");var workbook = XLSX.read(bstr, {type:"binary"});/* DO SOMETHING WITH workbook HERE */}oReq.send();

H5 拖拽上传

function handleDrop(e) {e.stopPropagation();e.preventDefault();var files = e.dataTransfer.files;var i, f;for (i = 0, f = files[i]; i != files.length; ++i) {var reader = new FileReader();var name = f.name;reader.onload = function(e) {var data = e.target.result;/* if binary string, read with type 'binary' */var workbook = XLSX.read(data, {type: 'binary'});/* DO SOMETHING WITH workbook HERE */};reader.readAsBinaryString(f);}}drop_dom_element.addEventListener('drop', handleDrop, false);

H5 input 上传

function handleFile(e) {var files = e.target.files;var i, f;for (i = 0, f = files[i]; i != files.length; ++i) {var reader = new FileReader();var name = f.name;reader.onload = function(e) {var data = e.target.result;var workbook = XLSX.read(data, {type: 'binary'});/* DO SOMETHING WITH workbook HERE */};reader.readAsBinaryString(f);}}input_dom_element.addEventListener('change', handleFile, false);

⚠️
XLSX.read(data, read_opts) 是用来解析一段数据.
XLSX.readFile(filename, read_opts) 会从一个文件中解析一段数据.

4.1 read_opts

read_opts 是读取 excel 的选项，其可选的配置有如下几项：

这里有一些需要注意的点不是很好翻译，为了避免歧义，我将原文放在下面

5、写入文件

在 node 中使用

if(typeof require !== 'undefined') XLSX = require('xlsx')XLSX.writeFile(workbook, 'out.xlsx');

利用 FileSaver.js 写入 binary

/* bookType can be 'xlsx' or 'xlsm' or 'xlsb' */var wopts = {bookType:'xlsx', bookSST:false, type:'binary' };var wbout = XLSX.write(workbook,wopts);function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}/* saveAs 函数会在本地机器上下载一个文件 */saveAs(new Blob([s2ab(wbout)],{type:""}), "test.xlsx")

⚠️
XLSX.write(data, read_opts) 用来写一份 workbook.
XLSX.writeFile(filename, read_opts) 会将 workbook 写入文件.

6、单元格对象

在 excel 中，每一个单元格可以看作一个对象，用户可以填充原始数据，设置文本类型，背景色，边框，甚至可以绘图，使用富文本，数学公式，以及指定与其他单元格的关联等。

单元格的地址可以用{c:C, r:R}来表示，其中 C 代表第几列，R代表第几行

假如我们选择 B5 这个单元格，该怎么表示呢？

{c:1, r:4}//第一列第四行

这是因为列和行默认都从 0 开始计数，而 A、B、C、D…Z… 字母占据了第 0 行，1、2、3、4…则占据了第 0 列

6.1 单元格属性

⚠️：默认的导出（比如导出csv）读取的是 w ，如果想更改值，可以在导出前delete cell.w或者cell.w=undefined

6.2 单元格样式

上一节中说到cell.s用来设置单元格的样式。

在 xlsx-style 中，单元格样式共有五个顶级的属性，分别是：fill,font,numFmt,alignment和border。

6.2.1 COLOR_SPEC

COLOR_SPEC用于实现字体、边框以及填充的颜色，可以选择以下几种写法：

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

6.2.2 BORDER_STYLE

border_style 用于指定边框的样式，excel中边框样式有很多种，其中的可选值为：

thinmediumthickdottedhairdashedmediumDasheddashDotmediumDashDotdashDotDotmediumDashDotDotslantDashDot

6.2.3 numFmt 的内置选项

代码里内置了一些格式化选项，用户可以通过索引，或者值的形式来选定

var table_fmt = {0: 'General',1: '0',2: '0.00',3: '#,##0',4: '#,##0.00',9: '0%',10: '0.00%',11: '0.00E+00',12: '# ?/?',13: '# ??/??',14: 'm/d/yy',15: 'd-mmm-yy',16: 'd-mmm',17: 'mmm-yy',18: 'h:mm AM/PM',19: 'h:mm:ss AM/PM',20: 'h:mm',21: 'h:mm:ss',22: 'm/d/yy h:mm',37: '#,##0 ;(#,##0)',38: '#,##0 ;[Red](#,##0)',39: '#,##0.00;(#,##0.00)',40: '#,##0.00;[Red](#,##0.00)',45: 'mm:ss',46: '[h]:mm:ss',47: 'mmss.0',48: '##0.0E+0',49: '@',56: '"上午/下午 "hh"時"mm"分"ss"秒 "',65535: 'General'};