导出自定义Excel表格

序：

最近做的项目涉及到了excel的导出，需要满足以下条件：

实现excel导出
兼容ie11
统计数据
修改宽高、合并单元格
修改其它样式

一、js-xlsx 介绍

xlsx由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。

1、兼容性 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAdWnrl7-1647329954432)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220210101914502.png)]$

2、使用

xlsx目录的dist目录下有很多个JS文件，一般情况下用xlsx.core.min.js就够了，xlsx.full.min.js则是包含了所有功能模块。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LByqUOpb-1647329954434)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220210102105305.png)]$

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的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转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 = '<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;
}

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/xlsx-style@0.8.13@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、大佬

导出自定义Excel表格（纯前端实现）

导出自定义Excel表格

序：

一、js-xlsx 介绍

1、兼容性 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAdWnrl7-1647329954432)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220210101914502.png)]$

2、使用

2.1.直接`script`标签引入即可：

2.2.引入XLSX

3、读取excel

3.1. 获取workbook对象

3.1.1.读取本地文件

3.1.2. 读取网络文件

3.2. 详解 workbook

3.2.1. Workbook Object

3.2.2. Sheet Object

3.2.3. 单元格对象

3.2.4. 读取workbook

4、导出excel的逻辑：

4.1.手动生成

4.2.利用官方工具类生产

附：基础版导出

4.3.合并单元格

二、XLSX-STYLE介绍

1、准备工作

2、可能遇到的问题

3、xlsx-style进行扩展

3.1.扩展全局修改单元格样式：

3.2.扩展修改行高的功能：

3.3.扩展根据dom节点生成excel的功能：

3.4.扩展根据二维数组生成excel的功能：

参考

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

导出自定义Excel表格（纯前端实现）

导出自定义Excel表格

序：

一、js-xlsx 介绍

1、兼容性

2、使用

2.1.直接script标签引入即可：

2.2.引入XLSX

3、读取excel

3.1. 获取workbook对象

3.1.1.读取本地文件

3.1.2. 读取网络文件

3.2. 详解 workbook

3.2.1. Workbook Object

3.2.2. Sheet Object

3.2.3. 单元格对象

3.2.4. 读取workbook

4、导出excel的逻辑：

4.1.手动生成

4.2.利用官方工具类生产

附：基础版导出

4.3.合并单元格

二、XLSX-STYLE介绍

1、准备工作

2、可能遇到的问题

3、xlsx-style进行扩展

3.1.扩展全局修改单元格样式：

3.2.扩展修改行高的功能：

3.3.扩展根据dom节点生成excel的功能：

3.4.扩展根据二维数组生成excel的功能：

参考

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1、兼容性 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lAdWnrl7-1647329954432)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220210101914502.png)]$

2.1.直接`script`标签引入即可：