由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。
1.1. 兼容性
兼容性如下图：
1.2. 如何使用
dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。
直接script标签引入即可：
<script type="text/javascript" src="./js/xlsx.core.min.js"></script>读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：
base64: 以base64方式读取；binary: BinaryString格式(byte n is data.charCodeAt(n))string: UTF8编码的字符串；buffer: nodejs Buffer；array: Uint8Array，8位无符号数组；file: 文件的路径（仅nodejs下支持）；
2.1. 获取workbook对象
2.1.1. 读取本地文件
直接上代码：
function readWorkbookFromLocalFile(file, callback) {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
var workbook = XLSX.read(data, {type: 'binary'});
if(callback) callback(workbook);
};
reader.readAsBinaryString(file);
}2.1.2. 读取网络文件
function readWorkbookFromRemoteFile(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if(xhr.status == 200) {
var data = new Uint8Array(xhr.response)
var workbook = XLSX.read(data, {type: 'array'});
if(callback) callback(workbook);
}
};
xhr.send();
}2.2. 详解 workbook
2.2.1. Workbook Object
workbook里面有什么东西呢，我们打印出来看一下：
可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：
2.2.2. Sheet Object
每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：
sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8；sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；- 等等；
关于单元格合并，看懂下面这张图基本上就没问题了：
结果如下：
2.2.3. 单元格对象
每一个单元格是一个对象（Cell Object），主要有t、v、r、h、w等字段（详见这里）：
- t：表示内容类型，
s表示string类型，n表示number类型，b表示boolean类型，d表示date类型，等等 - v：表示原始值；
- f：表示公式，如
B2 B3； - h：HTML内容
- w：格式化后的内容
- r：富文本内容
rich text - 等等
2.2.4. 读取workbook
普通方法：
function outputWorkbook(workbook) {
var sheetNames = workbook.SheetNames;
sheetNames.forEach(name => {
var worksheet = workbook.Sheets[name];
for(var key in worksheet) {
console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
}
});
}根据!ref确定excel的范围，再根据!merges确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类XLSX.utils给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：
有些不常用，常用的主要是：
XLSX.utils.sheet_to_csv：生成CSV格式XLSX.utils.sheet_to_txt：生成纯文本格式XLSX.utils.sheet_to_html：生成HTML格式XLSX.utils.sheet_to_json：输出JSON格式
常用的主要是sheet_to_csv或者sheet_to_html，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。
这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：
function readWorkbook(workbook)
{
var sheetNames = workbook.SheetNames;
var worksheet = workbook.Sheets[sheetNames[0]];
var csv = XLSX.utils.sheet_to_csv(worksheet);
document.getElementById('result').innerHTML = csv2table(csv);
}
function csv2table(csv)
{
var html = '<table>';
var rows = csv.split('/n');
rows.pop();
rows.forEach(function(row, idx) {
var columns = row.split(',');
columns.unshift(idx 1);
if(idx == 0) {
html = '<tr>';
for(var i=0; i<columns.length; i ) {
html = '<th>' (i==0?'':String.fromCharCode(65 i-1)) '</th>';
}
html = '</tr>';
}
html = '<tr>';
columns.forEach(function(column) {
html = '<td>' column '</td>';
});
html = '</tr>';
});
html = '</table>';
return html;
}导出分为2种，一种是基于现有excel修改，一种是全新生成，前者比较简单，我们这里着重讲后者。
3.1. 自己手写代码生成
导出excel文件，主要是如何生成一个sheet，我们这里写一个最简单的csv转excel示例：
function csv2sheet(csv) {
var sheet = {};
csv = csv.split('/n');
csv.forEach(function(row, i) {
row = row.split(',');
if(i == 0) sheet['!ref'] = 'A1:' String.fromCharCode(65 row.length-1) (csv.length-1);
row.forEach(function(col, j) {
sheet[String.fromCharCode(65 j) (i 1)] = {v: col};
});
});
return sheet;
}
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet;
var wopts = {
bookType: 'xlsx',
bookSST: false,
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
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;
}
return blob;
}拿到上面的blob对象就可以直接下载了，参考我之前在JS弹出下载对话框里面封装好的openDownloadDialog方法：
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url);
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || '';
var event;
if(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}所以，最终下载实现如下：
function exportExcel(csv) {
var sheet = csv2sheet(csv);
var blob = sheet2blob(sheet);
openDownloadDialog(blob, '导出.xlsx')；
}3.2. 利用官方工具类生成
其实上面这些代码都不需要我们手写，官方已经提供好了现成的工具类给我们使用，主要包括：
aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；json_to_sheet: 将一个由对象组成的数组转成sheet；
aoa_to_sheet示例：
var aoa = [
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
openDownloadDialog(sheet2blob(sheet), '导出.xlsx');table_to_sheet就更简单了，直接XLSX.utils.table_to_sheet($('table')[0])即可；
3.3. 处理单元格合并
一般来说，前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题，要不然直接导出csv文件就好了，何必引入几百kb的插件。
假设我们要生成如下格式的excel文件，其中A1-C1进行单元格合并：
代码如下：
var aoa = [
['主要信息', null, null, '其它信息'],
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
{s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');需要注意的地方就是被合并的单元格要用null预留出位置，否则后面的内容（本例中是第四列其它信息）会被覆盖。
3.4. 自定义样式
普通版本不支持定义字体、颜色、背景色等，有这个功能需要的可以使用pro版，好像是要收费的，因为官网没看到下载地址。
原创文章，作者：254126420，如若转载，请注明出处：https://blog.ytso.com/244527.html