导出自定义Excel表格（纯前端实现）
导出自定义Excel表格
序：
最近做的项目涉及到了excel的导出，需要满足以下条件：
- 实现excel导出
- 兼容ie11
- 统计数据
- 修改宽高、合并单元格
- 修改其它样式
一、js-xlsx 介绍
xlsx由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。
1、兼容性
2、使用
xlsx目录的dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。
2.1.直接script标签引入即可：
<script type="text/javascript" src="./js/xlsx.core.min.js"></script>
2.2.引入XLSX
安装插件
npm install xlsx --save
在组件中引入XLSX
import XLSX from 'xlsx'
3、读取excel
读取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下支持）；
3.1. 获取workbook对象
3.1.1.读取本地文件
// 读取本地excel文件
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);
}
3.1.2. 读取网络文件
// 从网络上读取某个excel文件，url必须同域，否则报错
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();
}
3.2. 详解 workbook
3.2.1. Workbook Object
workbook里面有什么东西呢，我们打印出来看一下：
可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：
3.2.2. Sheet Object
每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：
-
sheet['!ref']：表示所有单元格的范围，例如从A1到F8则记录为A1:F8； -
sheet[!merges]：存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列； -
sheet['!cols']：列属性对象的数组。列宽实际上以标准化方式存储在文件中，以“最大数字宽度”（渲染数字 0-9 的最大宽度，以像素为单位）衡量。解析时，列对象存储字段中的像素宽度、wpx字段中的字符宽度以及wch字段中的最大数字宽度MDW。比如'!cols': [{wpx: 45}, {wpx: 165}, {wpx: 45}, {wpx: 45}][ { 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 } ] -
sheet['!rows']: 行属性对象数组，如文档后面所述。每个行对象都对包括行高和可见性在内的属性进行编码。 -
等等；
关于单元格合并，看懂下面这张图基本上就没问题了：
结果如下：
3.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- s: 单元格的样式
font: {name: '宋体', sz: 30, bold: true},;alignment: { horizontal: 'center',vertical: 'center',wrap_text: true}
3.2.4. 读取workbook
普通方法：
// 读取 excel文件
function outputWorkbook(workbook) {
var sheetNames = workbook.SheetNames; // 工作表名称集合
sheetNames.forEach(name => {
var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
for(var key in worksheet) {
// v是读取单元格的原始值
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的话会保留单元格合并，但是生成的是代码，而不是
这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：
function readWorkbook(workbook)
{
var sheetNames = workbook.SheetNames; // 工作表名称集合
var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
var csv = XLSX.utils.sheet_to_csv(worksheet);
document.getElementById('result').innerHTML = csv2table(csv);
}
// 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
function csv2table(csv)
{
var html = '';
var rows = csv.split('\n');
rows.pop(); // 最后一行没用的
rows.forEach(function(row, idx) {
var columns = row.split(',');
columns.unshift(idx+1); // 添加行索引
if(idx == 0) { // 添加列索引
html += '';
for(var i=0; i<columns.length; i++) {
html += '' + (i==0?'':String.fromCharCode(65+i-1)) + ' ';
}
html += ' ';
}
html += '';
columns.forEach(function(column) {
html += ''+column+' ';
});
html += ' ';
});
html += '
';
return html;
}
4、导出excel的逻辑：
- excel整个表格专业名词是
workbook，里面每张表格是sheet - 页面引入xlsx的库，
https://unpkg.com/xlsx/dist/xlsx.core.min.js - 把数据生成sheet，
var sheet = XLSX.utils.json_to_sheet(jsonData)，json_to_sheet是将由对象组成的数组转化成sheet，当然还有 aoa_to_sheet将一个二维数组转成sheet 和 table_to_sheet将table的dom直接转成sheet - 创建虚拟的workbook，
var wb = XLSX.utils.book_new() - 把sheet添加到workbook里，
XLSX.utils.book_append_sheet(wb, sheet, "这里是sheetName"); - 把workbook转成blob，
var blob = workbook2blob(wb)，这里workbook2blob需要手动写啦； - 利用a标签和createObjectURL实现下载功能，
openDownloadDialog(blob, 'excel的标题.xlsx');，这里openDownloadDialog也会在下面放上代码
4.1.手动生成
导出excel文件，主要是如何生成一个sheet，我们这里写一个最简单的csv转excel示例：
// csv转sheet对象
function csv2sheet(csv) {
var sheet = {}; // 将要生成的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;
}
// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet;
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});
// 字符串转ArrayBuffer
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对象就可以直接下载了：
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
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);
}
/**
* 通用的打开下载对话框方法，没有测试过具体兼容性
* @param url 下载地址，也可以是一个blob对象，必选
* @param saveName 保存文件名，可选
*/
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
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);
}
所以，最终下载实现如下：
// 传入csv，执行后就会弹出下载框
function exportExcel(csv) {
var sheet = csv2sheet(csv);
var blob = sheet2blob(sheet);
openDownloadDialog(blob, '导出.xlsx')；
}
4.2.利用官方工具类生产
其实上面这些代码都不需要我们手写，官方已经提供好了现成的工具类给我们使用，主要包括：
aoa_to_sheet: 这个工具类最强大也最实用了，将一个二维数组转成sheet，会自动处理number、string、boolean、date等类型数据；table_to_sheet: 将一个table dom直接转成sheet，会自动识别colspan和rowspan并将其转成对应的单元格合并；（使用这个居多，通过获取Id）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])即可；
附：基础版导出
// 数据
const srcData = [
['name','gender','age'],
['zhangsan', 'male', 23],
['lisi', 'female', 24],
['wangwu', 'male', 25]
]
// 导出excel
// 创建workbook对象
const wb = XLSX.utils.book_new();
// 将srcData转换为worksheet
const ws = XLSX.utils.aoa_to_sheet(srcData);
// worksheet 加入workbook
XLSX.utils.book_append_sheet(wb, ws, 'sheet1');
// 导出
XLSX.writeFile(wb, 'fileName');
4.3.合并单元格
一般来说，前端生成excel而不是csv最主要目的都是为了解决csv不能实现单元格合并的问题，要不然直接导出csv文件就好了，何必引入几百kb的插件。
假设我们要生成如下格式的excel文件，其中A1-C1进行单元格合并：
代码如下：
var aoa = [
['主要信息', null, null, '其它信息'], // 特别注意合并的地方后面预留2个null
['姓名', '性别', '年龄', '注册时间'],
['张三', '男', 18, new Date()],
['李四', '女', 22, new Date()]
];
var sheet = XLSX.utils.aoa_to_sheet(aoa);
sheet['!merges'] = [
// 设置A1-C1的单元格合并
{s: {r: 0, c: 0}, e: {r: 0, c: 2}}
];
openDownloadDialog(sheet2blob(sheet), '单元格合并示例.xlsx');
注意:
被合并的单元格要用null预留出位置，否则后面的内容（本例中是第四列其它信息）会被覆盖
二、XLSX-STYLE介绍
XLSX.js的基础版本只有宽高、合并单元格等比较基础的修改，要更加复杂样式的修改得升级pro版本，引用XLSX-STYLE插件能导出xlsx文件且能满足需求中的样式修改(或许还有合适的工具但我不知道的吧)，但是XLSX-STYLE貌似已经许久不维护了，所以在上手使用的过程中还是有许多的问题出现。
1、准备工作
npm install xlsx-style将插件导入项目
import XLSX from 'xlsx-style'在组件中引入XLSX
更新：改进后的xlsx-style发布到npm上啦！安装命令npm install xlsx-style-medalsoft
2、可能遇到的问题
This relative module was not found:./cptable in ./node_modules/[email protected]@xlsx-style/dist/cpexcel.js完美报错
找到在\node_modules\xlsx-style\dist\cpexcel.js 807行的var cpt = require('./cpt' + 'able');更换成var cpt = cptable;保存继续。
Error: Can't resolve 'fs' in 'E:\\xlsx-style'完美报错
这个错误应该来源于在编译过程中xlsx源码中使用了node的fs模块，fs模块是服务器端模块，webpack虽然可以将fs代码加载到前端，但是浏览器是无法解释并且运行的，所以说，要修复这个错误，要么想办法修改代码使调用fs的操作发生在服务端，要么想办法安装一个能使浏览器识别到fs的浏览器插件，使fs能在浏览器被识别和运行，在我们需求中只涉及到了excel的导出，所以应该使用不到fs模块，因此我们选择在配置文件加上相关配置项使fs不被使用，所以我们在webpack.config.js的配置中加上node: { fs: 'empty', },大家的项目脚手架可能都不一样，配置该放哪可以自己尝试，这里就只能告诉大家在最顶层的配置项下面。
3、xlsx-style进行扩展
3.1.扩展全局修改单元格样式：
找到xlsx-style目录下的xlsx.js，找到defaultCellStyle，由命名可知，defaultCellStyle是所有单元格的默认样式，我们把它改成我们所需要的整体样式。
如果找不到defaultCellStyle，那么可能时没有对应的有二维数组转工作表对象的方法，从官方文档可以copy到相应的代码块，然后扩展到XLSX.Util上，如下图:
// 从json转化为sheet，xslx中没有aoaToSheet的方法，该方法摘自官方test
function aoa_to_sheet(data){
var defaultCellStyle = {
font: { name: "Meiryo UI", sz: 11, color: { auto: 1 } },
border: {
top: {
style:'thin',
color: {
auto: 1
}
},
left: {
style:'thin',
color: {
auto: 1
}
},
right: {
style:'thin',
color: {
auto: 1
}
},
bottom: {
style:'thin',
color: {
auto: 1
}
}
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: "center",
vertical: "center",
indent: 0
}
};
function dateNum(date){
let year = date.getFullYear();
let month = (date.getMonth()+1)>9?date.getMonth()+1:'0'+(date.getMonth()+1);
let day = date.getDate()>9?date.getDate():'0'+date.getDate();
return year+'/'+month+'/'+day;
};
const ws = {};
const range = {s: {c:10000000, r:10000000}, e: {c:0, r:0 }};
for(let R = 0; R !== data.length; ++R) {
for(let C = 0; C !== data[R].length; ++C) {
if(range.s.r > R) range.s.r = R;
if(range.s.c > C) range.s.c = C;
if(range.e.r < R) range.e.r = R;
if(range.e.c < C) range.e.c = C;
/// 这里生成cell的时候，使用上面定义的默认样式
const cell = {v: data[R][C], s: defaultCellStyle};
const cell_ref = XLSX.utils.encode_cell({c:C,r:R});
/* TEST: proper cell types and value handling */
if(typeof cell.v === 'number') cell.t = 'n';
else if(typeof cell.v === 'boolean') cell.t = 'b';
else if(cell.v instanceof Date) {
cell.t = 'n'; cell.z = XLSX.SSF._table[14];
cell.v = dateNum(cell.v);
}
else cell.t = 's';
ws[cell_ref] = cell;
}
}
/* TEST: proper range */
if(range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);
return ws;
};
3.2.扩展修改行高的功能：
xlsx-style不包含修改行高的功能，这里我们要扩展它，当然不是自己写，因为xlsx-style来源于xlsxjs，所以二者源码极为相似，我们npm安装xlsxjs，然后找到行高修改相应方法，复制扩展到xlsx-style即可，具体如下：
// 本部分代码来源CSDN
// xlsx-style版本0.8.13
// xlsx版本0.14.1
//这是xlsx-style文件中的xlsx.js的需要修改的代码，是从xlsx文件夹中的xlsx.js中复制出来的
// write_ws_xml_data找到这个方法名字，全部替换
// 把xlsx中能修改高度的代码复制到xlsx-style中
var DEF_PPI = 96, PPI = DEF_PPI;
function px2pt(px) { return px * 96 / PPI; }
function pt2px(pt) { return pt * PPI / 96; }
function write_ws_xml_data(ws, opts, idx, wb) {
var o = [], r = [], range = safe_decode_range(ws['!ref']), cell="", ref, rr = "", cols = [], R=0, C=0, rows = ws['!rows'];
var dense = Array.isArray(ws);
var params = ({r:rr}), row, height = -1;
for(C = range.s.c; C <= range.e.c; ++C) cols[C] = encode_col(C);
for(R = range.s.r; R <= range.e.r; ++R) {
r = [];
rr = encode_row(R);
for(C = range.s.c; C <= range.e.c; ++C) {
ref = cols[C] + rr;
var _cell = dense ? (ws[R]||[])[C]: ws[ref];
if(_cell === undefined) continue;
if((cell = write_ws_xml_cell(_cell, ref, ws, opts, idx, wb)) != null) r.push(cell);
}
if(r.length > 0 || (rows && rows[R])) {
params = ({r:rr});
if(rows && rows[R]) {
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
}
o[o.length] = (writextag('row', r.join(""), params));
}
}
if(rows) for(; R < rows.length; ++R) {
if(rows && rows[R]) {
params = ({r:R+1});
row = rows[R];
if(row.hidden) params.hidden = 1;
height = -1;
if (row.hpx) height = px2pt(row.hpx);
else if (row.hpt) height = row.hpt;
if (height > -1) { params.ht = height; params.customHeight = 1; }
if (row.level) { params.outlineLevel = row.level; }
o[o.length] = (writextag('row', "", params));
}
}
return o.join("");
}
3.3.扩展根据dom节点生成excel的功能：
找到xlsxjs的utils的table_to_sheet()方法，复制到xlsx-style中，并把其它相关引用的函数变量等都移植到xlsx-style中，直至能正常运行。
3.4.扩展根据二维数组生成excel的功能：
同上，在原xlsx内找aoa_to_sheet方法进行移植。
最近对功能模块代码做了整理，添加了类型判断以及多表导出，不过因为改动较多 ，代码变得有点复杂了，逻辑肯定还有优化空间，以后有机会再做一次整理吧，先将最新的放上来先
import XLSX from 'xlsx-style';
// npm install xlsx-style-medalsoft
interface IStyle {
font?: any;
fill?: any;
border?: any;
alignment?: any;
}
interface ICell {
r: number;
c: number;
}
interface IMerge {
s: ICell;
e: ICell
}
interface ICol {
wpx?: number;
wch?: number;
}
interface ISize {
cols: ICol[];
rows: any[];
}
interface ISpecialHeader {
cells: string[];
rgb: string;
color?: string;
}
interface ISpecialCol {
col: string[];
rgb: string;
expect: string[];
s: IStyle;
t?: string;
}
interface IRowCells {
row: string[];
s: IStyle;
}
interface IMyStyle {
all?: IStyle;
headerColor?: string;
headerFontColor?: string;
headerLine?: number;
bottomColor?: string;
rowCount?: number;
heightLightColor?: string;
rowCells?: IRowCells;
specialHeader?: ISpecialHeader[];
specialCol?: ISpecialCol[];
mergeBorder?: any[];
}
interface IConfig {
merge?: IMerge[];
size?: ISize;
myStyle?: IMyStyle;
}
/*
* @function 导出excel的方法
* @param data table节点||二维数组
* @param type 导出excel文件名
* @param config 样式配置参数 { all:{all样式的基本格式请参考xlsx-style内xlsx.js文件内的defaultCellStyle}
* merge:[s:{r:开始单元格行坐标,c:开始单元格列坐标},e:{r:结束单元格行坐标,c:结束单元格列坐标}]
* size:{col:[{wpx:800}],row:[{hpx:800}]},
* headerColor: 八位表格头部背景颜色, headerFontColor: 八位表格头部字体颜色,bottomColor:八位表格底部背景色,
* rowCount:表格底部行数, specialHeader: [{cells:[特殊单元格坐标],rgb:特殊单元格背景色}],
* sepcialCol:[{col:[特殊列的列坐标],rgb:特殊列的单元格背景色,expect:[特殊列中不需要修改的单元格坐标],s:{特殊列的单元格样式}}
* }]
*
* 导出流程 table节点|二维数组->worksheet工作表对象->workboo工作簿对象->bolb对象->uri资源链接->a标签下载或者调用navigator API下载
* 每个worksheet都是由!ref、!merge、!col以及属性名为单元格坐标（A1,B2等）值为{v:单元格值,s:单元格样式,t:单元格值类型}的属性组成
*/
export function downLoadExcel(exportElement: [][] | any, fileName: string, config: IConfig|IConfig[], multiSheet?: boolean, sheetNames?: string[]) {
let ws;
let wb = [];
if (multiSheet) {
exportElement.forEach((item, index) => {
wb.push(getSheetWithMyStyle(item, config[index]));
});
} else {
if(!Array.isArray(config)){
ws = getSheetWithMyStyle(exportElement, config);
}
}
console.log(ws, 'worksheet数据');
if (ws) {
downLoad([ws], fileName,sheetNames);
} else {
downLoad(wb, fileName, sheetNames);
}
}
export function downLoad(ws, fileName: string, sheetNames?: string[]) {
var blob = IEsheet2blob(ws, sheetNames);
if (IEVersion() !== 11) { //判断ie版本
openDownloadXLSXDialog(blob, `${fileName}.xlsx`);
} else {
window.navigator.msSaveOrOpenBlob(blob, `${fileName}.xlsx`);
}
}
export function getWorkSheetElement(exportElement: [][] | any) {
let ifIsArray = Array.isArray(exportElement);
let ws = ifIsArray ? XLSX.utils.aoa_to_sheet(exportElement) : XLSX.utils.table_to_sheet(exportElement);
return ws;
}
export function getSheetWithMyStyle(exportElement: [][] | any, config: IConfig, callback?: Function) {
//样式处理函数,返回ws对象，如果要对ws对象进行自定义的修改，可以单独调用此函数获得ws对象进行修改
try {
let ws = getWorkSheetElement(exportElement);
console.log(config, 'excel配置参数');
//根据data类型选择worksheet对象生成方式
if (config.merge) {
ws['!merges'] = config.merge;
}
ws['!cols'] = config.size.cols;
//all样式的基本格式请参考xlsx-style内xlsx.js文件内的defaultCellStyle
if (config.myStyle) {
if (config.myStyle.all) { //作用在所有单元格的样式，必须在最顶层，然后某些特殊样式在后面的操作中覆盖基本样式
Object.keys(ws).forEach((item, index) => {
if (ws[item].t) {
ws[item].s = config.myStyle.all;
}
});
}
if (config.myStyle.headerColor) {
if (config.myStyle.headerLine) {
let line = config.myStyle.headerLine;
let p = /^[A-Z]{1}[A-Z]$/;
Object.keys(ws).forEach((item, index) => {
for (let i = 1; i <= line; i++) {
if (item.replace(i.toString(), '').length == 1 || (p.test(item.replace(i.toString(), '')))) {
let headerStyle = getDefaultStyle();
headerStyle.fill.fgColor.rgb = config.myStyle.headerColor;
headerStyle.font.color.rgb = config.myStyle.headerFontColor;
ws[item].s = headerStyle;
}
}
});
}
}
if (config.myStyle.specialCol) {
config.myStyle.specialCol.forEach((item, index) => {
item.col.forEach((item1, index1) => {
Object.keys(ws).forEach((item2, index2) => {
if (item.expect && item.s) {
if (item2.includes(item1) && !item.expect.includes(item2)) {
ws[item2].s = item.s;
}
}
if (item.t) {
if (item2.includes(item1) && ws[item2].t) {
ws[item2].t = item.t;
}
}
});
});
});
}
if (config.myStyle.bottomColor) {
if (config.myStyle.rowCount) {
Object.keys(ws).forEach((item, index) => {
if (item.indexOf((config.myStyle.rowCount).toString()) != -1) {
let bottomStyle = getDefaultStyle();
bottomStyle.fill.fgColor.rgb = config.myStyle.bottomColor;
ws[item].s = bottomStyle;
}
})
}
}
config.myStyle?.specialHeader?.forEach((item, index) => {
Object.keys(ws).forEach((item1, index1) => {
if (item.cells.includes(item1)) {
ws[item1].s.fill = {
fgColor: {
rgb: item.rgb
}
};
if (item.color) {
ws[item1].s.font.color = {
rgb: item.color
};
}
}
});
});
if (config.myStyle.heightLightColor) {
Object.keys(ws).forEach((item, index) => {
if (ws[item].t === 's' && ws[item].v && ws[item].v.includes('%') && !item.includes((config.myStyle.rowCount).toString())) {
if (Number(ws[item].v.replace('%', '')) < 100) {
ws[item].s = {
fill: {
fgColor: {
rgb: config.myStyle.heightLightColor
}
},
font: {
name: "Meiryo UI",
sz: 11,
color: {
auto: 1
}
},
border: {
top: {
style: 'thin',
color: {
auto: 1
}
},
left: {
style: 'thin',
color: {
auto: 1
}
},
right: {
style: 'thin',
color: {
auto: 1
}
},
bottom: {
style: 'thin',
color: {
auto: 1
}
}
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: "center",
vertical: "center",
indent: 0
}
}
}
}
});
}
config.myStyle?.rowCells?.row.forEach((item, index) => {
Object.keys(ws).forEach((item1, index1) => {
let num = Number(dislodgeLetter(item1));
if (num == Number(item)) {
ws[item1].s = config.myStyle.rowCells.s;
}
});
});
if (!Array.isArray(exportElement) && config.myStyle.mergeBorder) { //对导出合并单元格无边框的处理，只针对dom导出，因为只有dom导出会出现合并无边框的情况
let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
let range = config.myStyle.mergeBorder;
range.forEach((item, index) => {
if (item.s.c == item.e.c) { //行相等,横向合并
let star = item.s.r;
let end = item.e.r;
for (let i = star + 1; i <= end; i++) {
ws[arr[i] + (Number(item.s.c) + 1)] = {
s: ws[arr[star] + (Number(item.s.c) + 1)].s
}
}
} else { //列相等，纵向合并
let star = item.s.c;
let end = item.e.c;
for (let i = star + 1; i <= end; i++) {
ws[arr[item.s.r] + (i + 1)] = {
s: ws[arr[item.s.r] + (star + 1)].s
}
}
}
});
}
}
callback && callback();
Object.keys(ws).forEach((item, index) => { //空数据处理，单元格值为空时不显示null
if (ws[item].t === 's' && !ws[item].v) {
ws[item].v = '-';
}
});
Object.keys(ws).forEach((item, index) => { //空数据处理，单元格值为空时不显示null
if (ws[item].t === 's' && ws[item].v.includes('%')) {
ws[item].v = ws[item].v.includes('.') ? (ws[item].v.replace('%', '').split('.')[1] === '0' ? `${ws[item].v.replace('%', '').split('.')[0]}%` : ws[item].v) : ws[item].v;
}
});
return ws;
} catch (e) {
throw (e);
}
}
function transIndexToLetter(num) { //数字转字母坐标，25->Z ,26-> AA
if (num < 26) {
return String.fromCharCode(num + 65);
} else {
return transIndexToLetter(Math.floor(num / 26) - 1) + transIndexToLetter(num % 26);
}
}
function dislodgeLetter(str) { //去掉字符串中的字母
var result;
var reg = /[a-zA-Z]+/; //[a-zA-Z]表示bai匹配字母，dug表示全局匹配
while (result = str.match(reg)) { //判断str.match(reg)是否没有字母了
str = str.replace(result[0], ''); //替换掉字母 result[0] 是 str.match(reg)匹配到的字母
}
return str;
}
export function sheetToJSON(wb,option?){
return XLSX.utils.sheet_to_json(wb,option);
}
function IEsheet2blob(sheet, sheetName?: string | string[]) {
console.log(sheet,'sheet');
console.log(sheetName,'sheetName');
try {
new Uint8Array([1, 2]).slice(0, 2);
} catch (e) {
//IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
Uint8Array.prototype.slice = Array.prototype.slice;
}
sheetName = Array.isArray(sheetName)?(sheetName.length?sheetName:['sheet1']):'sheet1';
var workbook = {
SheetNames: Array.isArray(sheetName) ? sheetName : [sheetName],
Sheets: {}
};
if (Array.isArray(sheetName)) {
sheetName.forEach((item, index) => {
workbook.Sheets[item] = sheet[index];
});
} else { workbook.Sheets[sheetName] = sheet; }
console.log(workbook,'workbook');
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
});
// 字符串转ArrayBuffer
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;
}
export function sheetToWorkBook(sheet, sheetName?: string | string[]){
console.log(sheet,'sheet');
console.log(sheetName,'sheetName');
try {
new Uint8Array([1, 2]).slice(0, 2);
} catch (e) {
//IE或有些浏览器不支持Uint8Array.slice()方法。改成使用Array.slice()方法
Uint8Array.prototype.slice = Array.prototype.slice;
}
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: Array.isArray(sheetName) ? sheetName : [sheetName],
Sheets: {}
};
if (Array.isArray(sheetName)) {
sheetName.forEach((item, index) => {
workbook.Sheets[item] = sheet[index];
});
} else { workbook.Sheets[sheetName] = sheet; }
console.log(workbook,'workbook');
// 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
return wbout;
}
function getDefaultStyle() {
let defaultStyle = {
fill: {
fgColor: {
rgb: ''
}
},
font: {
name: "Meiryo UI",
sz: 11,
color: {
rgb: ''
},
bold: true
},
border: {
top: {
style: 'thin',
color: {
auto: 1
}
},
left: {
style: 'thin',
color: {
auto: 1
}
},
right: {
style: 'thin',
color: {
auto: 1
}
},
bottom: {
style: 'thin',
color: {
auto: 1
}
}
},
alignment: {
/// 自动换行
wrapText: 1,
// 居中
horizontal: "center",
vertical: "center",
indent: 0
}
};
return defaultStyle;
}
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return 'edge'; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
}
function openDownloadXLSXDialog(url, saveName: string) {
try {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
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);
} catch (e) {
throw (e);
}
}
export function uploadExcel(exportElement: [][] | any, fileName: string, config: IConfig) {
let ws = getSheetWithMyStyle(exportElement, config);
console.log(ws, 'worksheet数据');
downLoad(ws, fileName);
}
export default {
downLoad,
downLoadExcel,
getWorkSheetElement,
getSheetWithMyStyle,
transIndexToLetter,
getDefaultStyle,
sheetToWorkBook,
sheetToJSON,
};
参考
1、插件
2、大佬