JavaScript实现数据导出为Excel和CSV文件

更新时间：2025年05月06日 11:12:58 作者：Enti7c

在 Web 开发中,经常会遇到需要将数据导出为文件的需求,这篇文章主要为大家详细介绍了如何使用JavaScript实现数据导出为Excel和CSV文件,需要的可以了解下

一、实现思路

我们通过 HTML 创建一个按钮，点击按钮时，触发 JavaScript 函数，将数据转换为 Excel 或 CSV 文件格式，并生成可下载的链接。

效果图：

二、代码实现

HTML 部分

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.7.1.min.js"></script>
    <title></title>
    <style>
        .content {
            width: 300px;
            display: flex;
            justify-content: space-around;
        }
 
        .inport {
            background-color: skyblue;
            width: 100px;
            font-weight: 600;
            font-size: 20px;
        }
 
        .inport:hover {
            background-color: azure;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <div class="content">
        <h1>导出数据：</h1>
        <button class="inport">一键导出</button>
    </div>
    <script>
        // 具体实现代码在下方
    </script>
</body>
 
</html>

在这个 HTML 结构中，我们定义了一个按钮，用于触发数据导出操作，并设置了相应的样式。

JavaScript 部分：

$('.inport').click(function () {
    // 假设这是从接口获取的数据
    const jsonData = [{
            name: '张三',
            tel: 15836333325,
            email: '1903333356@qq.com'
        },
        {
            name: '李四',
            tel: 15833338325,
            email: '19033333@qq.com'
        },
        {
            name: '测试',
            tel: 158333333325,
            email: '测试.com'
        }
    ];
 
    // 导出为Excel文件
    // 列标题
    let str = '<tr><td align="center">姓名</td><td>电话</td><td align="center">邮箱</td></tr>';
    // 循环遍历，每行加入tr标签，每个单元格加td标签
    for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>';
        for (const key in jsonData[i]) {
            // 增加\t为了不让表格显示科学计数法或者其他格式
            str += `<td>${jsonData[i][key] + '\t'}</td>`;
        }
        str += '</tr>';
    }
 
    const worksheet = 'Sheet1'; // Worksheet名
    const uri = 'data:application/vnd.ms-excel;base64,';
    // 输出base64编码
    const base64 = (s) => window.btoa(unescape(encodeURIComponent(s)));
 
    // 下载的表格模板数据
    const 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>
            <meta http-equiv="Conten-Type" content="text/html;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 cellpadding="100">${str}</table></body>
        </html>`;
 
    // 获取当前日期
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const dateString = `${year}-${month}-${day}`;
 
    const link = document.createElement("a");
    link.href = uri + base64(template); //下载模板
    // 添加日期到文件名
    link.download = `数据表_${dateString}.xls`;
    link.click();
 
    // 导出为CSV文件
    // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
    let str = `姓名,电话,邮箱\n`;
 
    for (let i = 0; i < jsonData.length; i++) {
        for (const key in jsonData[i]) {
            str += `(${jsonData[i][key] + '\t'},`;     // 增加\t为了不让表格显示科学计数法或者其他格式
        }
        str += '\n';
    }
 
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解决中文乱码
 
    const link = document.createElement("a"); // 通过创建a标签实现
    link.href = uri;
    // 添加日期到文件名
    link.download = `json数据表_${dateString}.csv`;
    link.click();
});

在上述 JavaScript 代码中，我们首先定义了要导出的数据jsonData。然后分别实现了将数据导出为 Excel 和 CSV 文件的功能。

对于 Excel 文件，我们构建了一个 HTML 表格模板，将数据填充到表格中，然后将其转换为 Base64 编码，生成可下载的链接。

对于 CSV 文件，我们将数据按照 CSV 格式拼接成字符串，进行编码后生成可下载的链接。

三、总结

通过以上代码，我们实现了在 Web 页面中点击按钮将数据导出为 Excel 和 CSV 文件的功能。在实际应用中，我们可以根据具体需求对数据格式和文件名称进行调整，以满足不同的业务场景。

到此这篇关于JavaScript实现数据导出为Excel和CSV文件的文章就介绍到这了,更多相关JavaScript数据导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS模拟浏览器实现全局搜索功能
这篇文章主要介绍了JS模拟浏览器实现全局搜索功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
详解webpack性能优化——DLL
本篇文章主要介绍了详解webpack性能优化——DLL，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Javascript判断图片尺寸大小实例分析
通常我们判断js图片大小都是利用images对象，然后再用attr来获取图片地址再进行判断就可以了。这篇文章主要介绍了Javascript判断图片尺寸大小的实例,需要的朋友可以参考下
2014-06-06
微信头像地址失效踩坑记附带解决方案
这篇文章主要介绍了微信头像地址失效踩坑记附带解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
关于javascript函数的几个话题
关于javascript函数的几个话题...
2007-03-03
使用setTimeout实现SetInterval原理解析
这篇文章主要为大家介绍了使用setTimeout实现SetInterval原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
JS面试题---关于算法台阶的问题
下面小编就为大家带来一篇JS面试题---关于算法台阶的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
深入理解Javascript中的valueOf与toString
javascript中所有数据类型都拥有valueOf和toString这两个方法，null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍，有需要的朋友可以参考下
2017-01-01
详解用场景去理解函数柯里化(入门篇)
这篇文章主要介绍了用场景去理解函数柯里化(入门篇)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
JavaScript实战(原生range和自定义特效)简单实例
下面小编就为大家带来一篇JavaScript实战(原生range和自定义特效)简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08

JavaScript实现数据导出为Excel和CSV文件

目录

一、实现思路

二、代码实现

三、总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具