如何用JavaScript导出MySQL数据为CSV 修复导出xls代码的兼容及打开报错问题

问题根因 #

• 打开文件报错：是新版Excel内置的扩展格式验证机制拦截导致的，你当前导出的文件本质是重命名为xls的HTML结构文件，不符合微软官方xls二进制格式规范，所以会触发安全警告。
• 旧代码引用废弃HTML版本：模板中使用的http://www.w3.org/TR/REC-html40是HTML4的官方命名空间，已经被淘汰。

调整后的完整代码 #

1. 导出按钮（无需修改，可保留原有代码） #

<button  type="button" class="btn btn-warning btn-sm" onClick="tableToExcel('testTable', 'W3C Example Table')"   title="Export to Excel">Export</button></div><br/>

2. 表格属性（无需修改，可保留原有代码） #

<table class="table table-bordered table-hover " border="1" id="testTable" >

3. 导出脚本（替换原有body底部的脚本即可） #

<script type="text/javascript"> 
var tableToExcel = (function() {
    // 导出模板改为HTML5规范
    const template = `
    <!DOCTYPE html>
    <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel">
    <head>
        <meta charset="UTF-8">
        <!--[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>
    `
    const format = (s, c) => s.replace(/{(\w+)}/g, (m, p) => c[p])

    return function(table, sheetName, fileName = '导出数据') {
        if (!table.nodeType) table = document.getElementById(table)
        const ctx = {
            worksheet: sheetName || 'Worksheet', 
            table: table.innerHTML
        }
        // 改用Blob方式导出，避免编码问题和长链接截断
        const htmlData = format(template, ctx)
        const blob = new Blob([htmlData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = `${fileName}.xlsx`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
    }
})()
</script>

改动说明 #

1. 替换了HTML4命名空间，新增HTML5标准DOCTYPE声明，符合当前HTML规范
2. 导出格式默认使用.xlsx后缀，降低Excel格式验证的拦截概率，如果需要保留xls后缀，只需要把${fileName}.xlsx改为${fileName}.xls即可
3. 废弃原有的window.location.href和unescape编码逻辑，改用Blob导出，特殊字符不会出现乱码，也不会出现长链接被截断的问题
4. 新增了fileName参数，可自定义导出的文件名，调用时传入第三个参数即可，示例：tableToExcel('testTable', '工作表1', '销售数据统计')

说明：如果修改后打开文件仍有轻微的格式提示，属于正常的安全提醒，点击「是」即可正常打开文件，不会影响内容。如果需要完全消除提示，建议使用专业的Excel导出库生成标准二进制格式的文件。

内容的提问来源于stack exchange，提问作者user17131817