JavaScript實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為Excel和CSV文件

更新時(shí)間：2025年05月06日 11:12:58 作者：Enti7c

在 Web 開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要將數(shù)據(jù)導(dǎo)出為文件的需求,這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為Excel和CSV文件,需要的可以了解下

一、實(shí)現(xiàn)思路

我們通過(guò) HTML 創(chuàng)建一個(gè)按鈕，點(diǎn)擊按鈕時(shí)，觸發(fā) JavaScript 函數(shù)，將數(shù)據(jù)轉(zhuǎn)換為 Excel 或 CSV 文件格式，并生成可下載的鏈接。

效果圖：

二、代碼實(shí)現(xiàn)

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>導(dǎo)出數(shù)據(jù)：</h1>
        <button class="inport">一鍵導(dǎo)出</button>
    </div>
    <script>
        // 具體實(shí)現(xiàn)代碼在下方
    </script>
</body>
 
</html>

在這個(gè) HTML 結(jié)構(gòu)中，我們定義了一個(gè)按鈕，用于觸發(fā)數(shù)據(jù)導(dǎo)出操作，并設(shè)置了相應(yīng)的樣式。

JavaScript 部分：

$('.inport').click(function () {
    // 假設(shè)這是從接口獲取的數(shù)據(jù)
    const jsonData = [{
            name: '張三',
            tel: 15836333325,
            email: '1903333356@qq.com'
        },
        {
            name: '李四',
            tel: 15833338325,
            email: '19033333@qq.com'
        },
        {
            name: '測(cè)試',
            tel: 158333333325,
            email: '測(cè)試.com'
        }
    ];
 
    // 導(dǎo)出為Excel文件
    // 列標(biāo)題
    let str = '<tr><td align="center">姓名</td><td>電話</td><td align="center">郵箱</td></tr>';
    // 循環(huán)遍歷，每行加入tr標(biāo)簽，每個(gè)單元格加td標(biāo)簽
    for (let i = 0; i < jsonData.length; i++) {
        str += '<tr>';
        for (const key in jsonData[i]) {
            // 增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
            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)));
 
    // 下載的表格模板數(shù)據(jù)
    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>`;
 
    // 獲取當(dāng)前日期
    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 = `數(shù)據(jù)表_${dateString}.xls`;
    link.click();
 
    // 導(dǎo)出為CSV文件
    // 列標(biāo)題，逗號(hào)隔開(kāi)，每一個(gè)逗號(hào)就是隔開(kāi)一個(gè)單元格
    let str = `姓名,電話,郵箱\n`;
 
    for (let i = 0; i < jsonData.length; i++) {
        for (const key in jsonData[i]) {
            str += `(${jsonData[i][key] + '\t'},`;     // 增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
        }
        str += '\n';
    }
 
    const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); // encodeURIComponent解決中文亂碼
 
    const link = document.createElement("a"); // 通過(guò)創(chuàng)建a標(biāo)簽實(shí)現(xiàn)
    link.href = uri;
    // 添加日期到文件名
    link.download = `json數(shù)據(jù)表_${dateString}.csv`;
    link.click();
});

在上述 JavaScript 代碼中，我們首先定義了要導(dǎo)出的數(shù)據(jù)jsonData。然后分別實(shí)現(xiàn)了將數(shù)據(jù)導(dǎo)出為 Excel 和 CSV 文件的功能。

對(duì)于 Excel 文件，我們構(gòu)建了一個(gè) HTML 表格模板，將數(shù)據(jù)填充到表格中，然后將其轉(zhuǎn)換為 Base64 編碼，生成可下載的鏈接。

對(duì)于 CSV 文件，我們將數(shù)據(jù)按照 CSV 格式拼接成字符串，進(jìn)行編碼后生成可下載的鏈接。

三、總結(jié)

通過(guò)以上代碼，我們實(shí)現(xiàn)了在 Web 頁(yè)面中點(diǎn)擊按鈕將數(shù)據(jù)導(dǎo)出為 Excel 和 CSV 文件的功能。在實(shí)際應(yīng)用中，我們可以根據(jù)具體需求對(duì)數(shù)據(jù)格式和文件名稱(chēng)進(jìn)行調(diào)整，以滿足不同的業(yè)務(wù)場(chǎng)景。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出為Excel和CSV文件的文章就介紹到這了,更多相關(guān)JavaScript數(shù)據(jù)導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: