JS实现导出网页表格为Excel

最新推荐文章于 2022-10-25 18:14:50 发布

音尘啊

最新推荐文章于 2022-10-25 18:14:50 发布

阅读量780

点赞数 1

文章标签： JS html css 前端

本文链接：https://blog.csdn.net/asd497907957/article/details/102495287

版权

首先声明：这篇是转载然后稍加修改的，原文下载表格会出现乱码，因此做了一些改进。
原文地址：js实现table导出Excel，保留table样式
PS：实际导出并不是真正的Excel文件，实际上一个html文件，只不过后缀改为了xls，利用Excel能打开html的特性，直接贴代码。
PS：chrome浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table td {
            font-size: 12px;
            width: 200px;
            height: 30px;
            text-align: center;
            background-color: #4f891e;  /*这是网页上表格的背景颜色*/
            color: #ffffff;   /*这是网页上表格的字体颜色*/
        }
    </style>
</head>
<body>
    <a download="下载表格" href="#"  id="excelOut" class="easyui-linkbutton l-btn l-btn-small" data-options="iconCls:'icon-undo'">导出为 Excel 文档</a>
    <table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
        <thead>
            <tr>
                <td style="font-size: 18px">公司一</td>
                <td>公司二一</td>
                <td>公司三</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td>A公司</td>
                <td>B公司</td>
                <td>C公司</td>
            </tr>
            <tr>
                <td colspan="3">共计</td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            tableToExcel('tableToExcel', '下载模板')
        };
        //base64转码
        var base64 = function (s) {
            return window.btoa(unescape(encodeURIComponent(s)));
        };
        //替换table数据和worksheet名字
        var format = function (s, c) {
            return s.replace(/{(\w+)}/g,
                function (m, p) {
                    return c[p];
                });
        }
        function 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">' +
                'table td {' +
                'border: 1px solid #000000;' +
                'width: 200px;' +
                'height: 30px;' +
                ' text-align: center;' +
                'background-color: transparent;' +    /*这里修改表格中背景的颜色，如果你想要原来的背景可以用网页上使用的背景色，如果想要不同的颜色应该是不能实现的*/
                'color: #000000;' +   /*这里修改导出的表格中文字的颜色*/
                ' }' +
                '</style>' +
                '</head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><body ><table class="excelTable">{table}</table></body></html>'; /*这个地方解决乱码的问题*/
            if (!tableid.nodeType) tableid = document.getElementById(tableid);
            var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML };
            document.getElementById("excelOut").href = uri + base64(format(template, ctx));
        }
    </script>
</body>
</html>

附上常见颜色：

颜色名称和sRGB值

黑色=“#000000”		     绿色=“#008000”
银=“#C0C0C0”		     石灰=“#00FF00”
Gray=“#808080”		     奥利芙=“#808000”
White=“#FFFFFF”		     黄色=“#FFFF 00”
马龙=“#800000”		     海军=“#000080”
红色=“#FF 0000”		     蓝色=“0000FF”
紫色=“#800080”		     teal=“#008080”
紫红色=“#FF00FF”		     Aqua=“00FFFF”