纯JS对页面表格进行EXCEL导出(完整导出,包含页面样式)

**

纯JS对页面表格进行EXCEL导出

**

1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改
2.在tableid.innerHTML中可以对表格中的内容进行修改替换(其中放的内容就是导出后的表格内容)
3.需要引入xlsx.full.min.js文件
4.tableid为为表格的id
5.sheetName为下载后的文件名称

        base64(excelFile) {
            return window.btoa(unescape(encodeURIComponent(excelFile)))
        },
        tableToExcel(tableid, sheetName) {
            var uri = 'data:application/vnd.ms-excel;base64,';
            var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
                'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
                + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
                + '</x:ExcelWorkbook></xml><![endif]-->' +
                ' <style type="text/css">' +
                '    .ivu-table td{\n' +
                '        /*background-color: #FFFFFF;*/\n' +
                '        /*color: #fff;*/\n' +
                '        /*border:1px  solid #FFFFFF;*/\n' +
                '    }\n' +
                '    /*每行的基本样式*/\n' +
                '    .ivu-table-row td {\n' +
                '        color: #000000;\n' +
                '        min-width:50px;\n' +
                '    }\n' +
                '    /*头部th*/\n' +
                '    .ivu-table-header th{\n' +
                '        color:\t#FFFFFF;\n' +
                '        font-weight: bold;\n' +
                '        background-color: rgb(98,167,249);\n' +
                '        min-width:50px;' +
                '        border:1px  solid #FFFFFF;' +
                '        position: relative;  \n' +
                '        top: expression(this.offsetParent.scrollTop);  \n' +
                '        z-index: 300; \n' +
                '    }\n' +
                '    /*偶数行*/\n' +
                '    .ivu-table-stripe-even td{\n' +
                '        background-color: #ffffff!important;\n' +
                '    }\n' +
                '    /*奇数行*/\n' +
                '    .ivu-table-stripe-odd td{\n' +
                '        background-color:#F0FFFF!important;\n' +
                '    }\n' +
                '    /*选中某一行高亮*/\n' +
                '    .ivu-table-row-highlight td {\n' +
                '        background-color: #d63333!important;\n' +
                '    }' +
                '</style>' +
                '</head><body ><table class="excelTable">{table}</table></body></html>';
            if (!tableid.nodeType) tableid = document.getElementById(tableid);
            tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')
            var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
            var a = document.createElement("a");
            a.download = sheetName + ".xls";
            a.href = uri + this.base64(this.format(template, ctx));;
            a.click();
        },
        format (s, c) {
            return s.replace(/{(\w+)}/g,
                function (m, p) {
                    return c[p];
                });
        }
发布了8 篇原创文章 · 获赞 9 · 访问量 3029

猜你喜欢

转载自blog.csdn.net/qq_43248658/article/details/105202965