js 导出excel文件

js导出Excel的方法

利用html的table表格的格式书写想要的excel格式
获取table的内容并组装成一个xls格式的字符串
利用Blob对象生成一个xls格式的文件
利用a标签的download属性创建文件名，并下载到本地

将字符串转成xls文件，本文主要利用Blob对象和URL.createObjectURL() 方法

Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

下面是个例子

//导出excel
export const tableToExcel = (tableDom,filename)=>{
    if (!tableDom || tableDom.nodeType!=1){
        return new Error('tableDom type error！')
    }

    var oHtml = tableDom.outerHTML;
    var excelHtml = `
                <html>
                <head>
                    <meta charset='utf-8' />
                    <style>
                    .tableA {
                        border-collapse: collapse;
                    }
                    .tableA .title th{
                        height: 50px;
                        font-size: 24px;
                        font-family: '微软雅黑';
                        font-weight: 700;
                    }
                    .tableA tr th {
                        border: 1px #000 solid;
                        height: 40px;
                        background: #efefef;
                    }
                    .tableA tr td {
                        padding: 0 40px;
                        border: 1px #000 solid;
                        height: 40px;
                        text-align: center;
                    }
                    .tableA .footer td {
                        font-size: 20px;
                        font-weight: 700;
                    }
                    </style>
                </head>
                <body>
                    ${oHtml}
                </body>
                </html>
            `;
    var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' });
    // 创建一个a标签
    var oA = document.createElement('a');
    // 利用URL.createObjectURL()方法为a元素生成blob URL
    oA.href = URL.createObjectURL(excelBlob);
    // 给文件命名
    oA.download = filename+'.xls';
    // 模拟点击
    oA.click();
}

另一种方式

使用window.btoa将字符转换成base64，然后将a标签的href设置为 'data:application/vnd.ms-excel;base64,'+base64编码的数据，使用a标签的download进行下载。
在个浏览器中，使用window.btoa对Unicode字符串进行编码都会出发一个字符越界的异常，解决方法是，先把Unicode字符串转换为UTF-8编码。如下方法

function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

// Usage:
utf8_to_b64('? à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "? à la mode"
//译者注:在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))
//所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))

下面一个例子

var tableToExcel = function(table,name){
    var uri = 'data:application/vnd.ms-excel;base64,',    
                template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',    
                base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },    
                format = function(s, c) { return s.replace(/{(\w+)}/g,function(m, p) { return c[p]; }) } 

    if (!table.nodeType) table = document.getElementById(table)    
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}

    let a = document.createElement('a');
    a.href = uri + window.btoa(unescape(encodeURIComponent('\uFEFF'+format(template,ctx))));
    a.download = 'aaa.xls'
    a.click();
}

js导出Excel的方法

猜你喜欢