纯前端将数据导出到excel表格

最新推荐文章于 2024-07-25 09:24:40 发布

幺叭伍

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量649

点赞数 1

文章标签：前端 javascript excel

本文链接：https://blog.csdn.net/weixin_50422141/article/details/121230179

版权

JavaScript CSV 数据导出 JSON转换前端开发

关键词由CSDN通过智能技术生成

<html>

<head>
    <button onclick='exportExcel()'>导出</button>
</head>

<body>
    <script>
        const exportExcel = () => {
            // 要导出的数据
            const list = [{
                    name: '张山',
                    phone: '123456789',
                    email: '123456789@qq.com'
                },
                {
                    name: '李四',
                    phone: '123456789',
                    email: '123456789@qq.com'
                },
                {
                    name: '王二',
                    phone: '123456789',
                    email: '123456789@qq.com'
                },
                {
                    name: '麻子',
                    phone: '123456789',
                    email: '123456789@qq.com'
                },
            ];
            // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `姓名,电话,邮箱\n`;
            // 增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < list.length; i++) {
                for (const key in list[i]) {
                    str += `${list[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 = "数据表.csv";
            link.click();
        }
    </script>
</body>

</html>

幺叭伍

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
纯前端将数据导出到excel表格

<html><head> <button onclick='exportExcel()'>导出</button></head><body> <script> const exportExcel = () => { // 要导出的数据 const list = [{ name: '张山',
复制链接

扫一扫