使用 css 格式将表格导出到 excel - 在 excel 中给出警告消息 - “filename.xls 的文件格式和扩展名不匹配。”答案

【问题标题】：Export table to excel with css formatting - gives alert message in excel - "The file format and extension of filename.xls don't match."使用 css 格式将表格导出到 excel - 在 excel 中给出警告消息 - “filename.xls 的文件格式和扩展名不匹配。”
【发布时间】：2020-12-30 12:57:49
【问题描述】：

我正在使用下面的代码从具有 css 格式的表中生成 excel。

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var tableToExcel = (function () {
        // Define your style class template.
        var style = "<style>.green { background-color: green; }</style>";
        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]-->' + style + '</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))  
            let a = document.createElement('a');
        a.href = uri + base64(format(template, ctx));
        a.download = this.fileName + '.xls';
        a.click();
        }
    })()
</script>
<style type="text/css">
    .green
    {
        background-color: green;
    }
</style>    
    <input type="button" onclick="tableToExcel('testTable', 'W3CExampleTable')" value="Export to Excel" />
    <table id="testTable" summary="Code page support in different versions of MS Windows."
        rules="groups" frame="hsides" border="2">
    <caption>
        CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
    </caption>
    <colgroup align="center"></colgroup>
    <colgroup align="left"></colgroup>
    <colgroup span="2" align="center"></colgroup>
    <colgroup span="3" align="center"></colgroup>
    <thead valign="top">
        <tr>
            <th>Code-Page<br />ID</th>
            <th>Name</th>
            <th>ACP</th>
            <th>OEMCP</th>
            <th>Windows<br />NT 3.1</th>
            <th>Windows<br />NT 3.51</th>
            <th>Windows<br />95</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1200</td>
            <td style="background-color: #00f; color: #fff">Unicode (BMP of ISO/IEC-10646)</td>
            <td></td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>*</td>
        </tr>
        <tr>
            <td>1250</td>
            <td style="font-weight: bold">
                <a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
            </td>
            <td>X</td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td class="green">1255</td>
            <td>Hebrew</td>
            <td>X</td>
            <td></td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>437</td>
            <td>MS-DOS United States</td>
            <td></td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td>708</td>
            <td>Arabic (ASMO 708)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>709</td>
            <td>Arabic (ASMO 449+, BCON V4)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
        <tr>
            <td>710</td>
            <td>Arabic (Transparent Arabic)</td>
            <td></td>
            <td>X</td>
            <td></td>
            <td></td>
            <td>X</td>
        </tr>
    </tbody>
</table>

以上代码正在生成excel文件。

打开 excel 文件时，我收到以下消息。

“filename.xls 的文件格式和扩展名不匹配。该文件可能已损坏或不安全。除非您信任其来源，否则不要打开它。仍然要打开它吗？”

任何人都有解决方案来避免从代码中显示如上所示的消息。

【问题讨论】：

标签： javascript css excel export-to-excel

【解决方案1】：

你只需要改变这一行

a.download = this.fileName + '.xls';

到这里

 a.download = this.fileName + '.xlsx';

xlsx是最新office的文件格式。

【讨论】：

我已经尝试了上述解决方案并收到以下警报消息 - “Excel 无法打开文件 filename.xlsx 因为文件格式或文件扩展名无效。验证文件没有损坏并且文件扩展名与文件的格式相匹配。”
如果是这种情况，我觉得如果您使用现成的插件会更好。这个答案应该真的可以帮助您，而且实施起来并不多。 stackoverflow.com/a/43488998/11117237