将带有格式化 CSS 的 html 表导出到 Javascript 或 Jquery 中的 Excel 或 PDF 文件中答案

【问题标题】：Exporting html table with formatted CSS into an Excel or PDF file in Javascript or Jquery将带有格式化 CSS 的 html 表导出到 Javascript 或 Jquery 中的 Excel 或 PDF 文件中
【发布时间】：2012-12-12 21:27:16
【问题描述】：

我已经尝试了几种方法，点击按钮的 Datatable 方法和这个 Javascript：

<script type="text/javascript">
var tableToExcel = (function () {
    var uri = 'data:application/vnd.ms-excel;base64,',
        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]--></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];
            })
        }
    return function (table, name) {
        if (!table.nodeType) table = document.getElementById(table)
        var ctx = {
            worksheet: name || 'Worksheet',
            table: table.innerHTML
        }
        window.location.href = uri + base64(format(template, ctx))
    }
})()
</script>

使用此按钮：

<input type="button" onclick="tableToExcel('myTable', 'W3C Example Table')" value="Export to Excel">

是否也可以保存格式化的 CSS 表格？我只在 tr 处格式化表格，例如：

<tr class="wassat">
<td><a>280 Zzzap</a></td>
<td><a>Bally Astrocade</a></td>
<td><a>arc 4/10</a></td>
<td><a>badan</a></td>
<td><a>3/5</a></td>
<td><a>Rc</a></td>
<td><a>Arc</a></td>
<td><a>1978</a></td>
<td><a>Didam</a></td>
<td><a></a></td>

</tr>

css代码是这样的

tr.wassat { background-color:#DF7401; }

我希望这不是一个在搜索中找不到的重复帖子。

【问题讨论】：

datatables.net/extras/tabletools - 你试过了吗？
是的，我做到了，但它正常保存表格，没有格式化的 css，也保存为 csv，但它可以作为 excel 表格加载到 excel 中

标签： javascript jquery html excel html-table

【解决方案1】：

试试这个：

var tableToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,'
                , 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]--></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]; }) }
            return function (table, name) {
                if (!table.nodeType) table = document.getElementById(table)
                var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
                var blob = new Blob([format(template, ctx)]);
                var blobURL = window.URL.createObjectURL(blob);

                if (ifIE()) {
                    csvData = table.innerHTML;
                    if (window.navigator.msSaveBlob) {
                        var blob = new Blob([format(template, ctx)], {
                            type: "text/html"
                        });
                        navigator.msSaveBlob(blob, '' + name + '.xls');
                    }
                }
                else
                window.location.href = uri + base64(format(template, ctx))
            }
        })()

        function ifIE() {
            var isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;
            var isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") != -1;
            return isIE11orLess;
        }

【讨论】：