一、先看实现后的图
二、技术
这个表格主要采用了 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'};
7、Worksheet 对象
Worksheet对象指代当前的 excel 表,其中包含了一些当前表的设置选项,比如:合并单元格、渲染区域、列宽、打印头等信息。
Worksheet 对象的所有属性都要以!
开头
页眉页脚以及分页在文档上没有看到相关的信息, 可能目前还不支持。
后续如果有任何补充,我会及时更新
四、demo
github 上的 xlsx-style 如果不支持设置行高,或者需要 demo 代码的请到这里下载。