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

news2025/5/10 16:44:56

在 Web 开发中，经常会遇到需要将数据导出为文件的需求，例如将数据导出为 Excel 或 CSV 文件。今天，我们就来探讨如何使用 JavaScript 实现这一功能。

一、实现思路

我们通过 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 格式拼接成字符串，进行编码后生成可下载的链接。