前端使用表格标签导出的是.htm,如何导出真正的xlsx

我想在前端用js导出带样式的xlsx文件

用table标签写行内样式,然后导出

导出的文件可以正常打开,且带有样式,后缀也是xlsx

但是!!!

导出的其实是.htm的文件,因为office或者wps可以打开此类文件所以让人产生错觉

我一直在找解决方案

这问题好像无解呀,必须要用xlsx-style吗?
困扰我好久了

贴下代码


<html>
<head>
    <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
    <button onclick='tableToExcel()'>导出</button>
</head>
<body>
    <script>
    const tableToExcel = () => {
        // 要导出的json数据
        const jsonData = [
            {
                name:'路人甲',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'炮灰乙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'土匪丙',
                phone:'123456789',
                email:'000@123456.com'
            },
            {
                name:'流氓丁',
                phone:'123456789',
                email:'000@123456.com'
            },
        ];
        // 列标题,逗号隔开,每一个逗号就是隔开一个单元格
        let str = `姓名,电话,邮箱\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        for(let i = 0 ; i < jsonData.length ; i++ ){
            for(const key in jsonData[i]){
                str+=`${jsonData[i][key] + '\t'},`;     
            }
            str+='\n';
        }
        // encodeURIComponent解决中文乱码
        const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = uri;
        // 对下载的文件命名
        link.download =  "json数据表.csv";
        link.click();
    }
    </script>
</body>
</html>

我是用的这位大佬的导出
https://blog.csdn.net/qq_41995919/article/details/112846402
在用的这个方法导出,的确可以设计非常棒的样式,不过最终没法导出真正的xlsx

我目前是用 js-xlsx 配合yxg-xlsx-style 完成带样式的导出(不过弊端很明显,样式设置很麻烦,且无法是设置高度)

要导出一个真正的 XLSX 文件有以下方法:

  • 地域难度: 可以按照XLSX 规范去实现生成 XLSX 文件的模块.
  • 困难难度: 其实 XLSX 文件就是一个压缩包,直接去解压一个真实的 XLSX 文件,当作模板,然后把数据部分修改成自己需要的,最后在压缩成 XLSX 就可以了,不过需要要正确的解压和压缩,不然会无法识别

    How to properly assemble a valid xlsx file from its internal sub-components?

  • 普通难度: 直接使用现成的库比如你提到的 js-xlsx,或者ExcelJS

关于使用第三方开源库,我的建议是,如果没有命令禁止使用的话,在符合条件的情况下,只要能帮助项目实现目标的,都可以用.毕竟一般成熟的开源库,把一些我们会遇到的坑都踩过了,可以省掉很大一部分精力.当然如果公司有足够能力和精力去自研的话,就当我没说.