js导出可编辑的excel表格

最新推荐文章于 2023-01-06 15:34:00 发布

ITzhongzi

最新推荐文章于 2023-01-06 15:34:00 发布

阅读量1k

点赞数 1

分类专栏：前端学习笔记文章标签： blob 下载乱码

本文链接：https://blog.csdn.net/ITzhongzi/article/details/81905269

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        let htmls = `<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>
                                <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>
                                <tr>
                                    <td>dfdsf</td>
                                    <td>dfdsf</td>
                                    <td>dfdsf哈哈哈</td>
                                </tr>
                                <tr>
                                    <td>dfdsf</td>
                                    <td>dfdsf</td>
                                    <td>dfdsf哈哈哈</td>
                                </tr>
                                <tr>
                                    <td>dfdsf</td>
                                    <td>dfdsf</td>
                                    <td>dfdsf哈哈哈</td>
                                </tr>
                            </table>
                        </body>

                        </html>`;
        var blob = new Blob([htmls], { type: "application/x-xls;charset=utf-8" });
        let aDom = document.createElement("a");
        aDom.href = URL.createObjectURL(blob);
        aDom.download = "导出数据.xls";
        aDom.click();
    </script>
</body>

</html>

效果展示：

这里写图片描述

注意：1、<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">
这个 html投标前中有些关于office 的配置。（若没有html标签中这些配置，会导致导出的表格无边框）
2、<meta charset="UTF-8"> 
这两个也是关于 office的配置，具体不解析了。

注意：

若没有上边那些配置，导出的文件会出现没有边框，乱码等情况，如下所示：
这里写图片描述

ITzhongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
js导出可编辑的excel表格

示例代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫