如何使用 JavaScript 将 HTML 表格导出为 CSV？

逗号分隔值或 CSV 是一种文本文件，其中每个值都由逗号分隔。 CSV 文件对于将数据导入和导出到其他软件应用程序非常有用。

有时在开发 Web 应用程序时，您可能会遇到需要下载从 HTML 表格转换而来的 CSV 文件的场景。在这篇文章中，让我们讨论如何在不使用任何花哨的插件、模块或框架的情况下，使用纯 JavaScript 来创建此功能。

方法：创建一个 HTML 表格。通过使用 JavaScript 和文档对象模块 (DOM)，我们将提取一行中的每一列数据并使用逗号组合数据。在对每一行执行此操作后，再次使用 DOM，我们将创建一个新的下载链接并使用 JavaScript 事件侦听器触发该链接以下载数据以形成 CSV 文件。

步骤 1：创建 HTML 表格：创建一个带有表格和按钮的简单 HTML 页面。此按钮将用作将表格转换为逗号分隔值并以 CSV 文件形式下载的触发器。应用您自己需要的 CSS 样式。

HTML

 

    
        
GeeksForGeeks
        
Table to CSV converter
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        
Name
age
place
Laxman
19
Hyderabad
Dhoni
22
Ranchi
Kohli
25
Delhi
        


        download CSV
    

 

步骤 2：将表数据转换为逗号分隔值：编写一个 JavaScript函数来检索表数据并将其转换为逗号分隔值。利用文档对象模型访问行的每一列中的表数据。当用户单击下载按钮时应触发此函数。

Javascript

function tableToCSV() {
 
    // Variable to store the final csv data
    var csv_data = [];
 
    // Get each row data
    var rows = document.getElementsByTagName('tr');
    for (var i = 0; i < rows.length; i++) {
 
        // Get each column data
        var cols = rows[i].querySelectorAll('td,th');
 
        // Stores each csv row data
        var csvrow = [];
        for (var j = 0; j < cols.length; j++) {
 
            // Get the text data of each cell of
            // a row and push it to csvrow
            csvrow.push(cols[j].innerHTML);
        }
 
        // Combine each column value with comma
        csv_data.push(csvrow.join(","));
    }
    // combine each row data with new line character
    csv_data = csv_data.join('\n');
 
    /* We will use this function later to download
    the data in a csv file downloadCSVFile(csv_data);
    */
}

当tableToCSV()函数被触发时，它使用文档对象模型访问每个表行数据。 getElementByTagName(‘tr’)检索所有表行数据并将其存储在行变量中。 rows[i].querySelectorAll(‘td,th’) 将获取该表行的每一列数据。然后将其存储在csvrow变量中。 csvrow变量数据使用逗号组合以表示 CSV 文件的一行，然后将其存储在csv_data变量中，该变量组合表示我们的 CSV 文件的数据。然后，我们一起使用换行字符作为一个CSV文件中的每一行中的新行表示csv_data值。现在我们的数据已准备好导出到 CSV 文件中。

第 3 步：编写一个脚本来下载 CSV 文件：现在我们已经准备好了转换后的数据，我们需要编写一个脚本来创建一个 CSV 文件，将我们的数据输入其中，并触发浏览器在用户之后自动下载它已单击下载按钮。由于表中的数据转换后此函数将被触发，我们将调用tableToCSV（）函数内部此函数。

Javascript

function downloadCSVFile(csv_data) {
 
    // Create CSV file object and feed our
    // csv_data into it
    CSVFile = new Blob([csv_data], { type: "text/csv" });
 
    // Create to temporary link to intiate
    // download process
    var temp_link = document.createElement('a');
 
    // Download csv file
    temp_link.download = "GfG.csv";
    var url = window.URL.createObjectURL(CSVFile);
    temp_link.href = url;
 
    // This link should not be displayed
    temp_link.style.display = "none";
    document.body.appendChild(temp_link);
 
    // Automatically click the link to trigger download
    temp_link.click();
    document.body.removeChild(temp_link);
}

该函数将之前形成的 CSV 数据作为参数。我们将通过创建一个 CSV 类型的 blob 对象来创建一个新文件，然后将我们的 CSV 数据输入其中。我们需要一个链接来触发浏览器窗口下载文件。但是，我们的 HTML 中没有任何链接可以这样做。因此，我们将使用 DOM 创建一个新链接并为其属性提供适当的值。用户不应看到如此创建的此链接，因为此链接仅用于触发下载目的，而不用于任何其他目的。所以我们需要确保这个链接对用户是不可见的，并且一旦下载触发过程结束就被删除。我们可以再次使用 DOM 来满足我们的所有要求。

使用click()事件侦听器，我们可以自动点击链接并下载我们的 CSV 文件。现在我们的 CSV 文件应该已经成功下载了。

最终代码：

HTML

 

    
        GeeksForGeeks
        Table to CSV converter
        
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
            
                
                
                
            
        NameageplaceLaxman19HyderabadDhoni22RanchiKohli25Delhi
        
        
            download CSV
        
    
 
    
        function tableToCSV() {
 
            // Variable to store the final csv data
            var csv_data = [];
 
            // Get each row data
            var rows = document.getElementsByTagName('tr');
            for (var i = 0; i < rows.length; i++) {
 
                // Get each column data
                var cols = rows[i].querySelectorAll('td,th');
 
                // Stores each csv row data
                var csvrow = [];
                for (var j = 0; j < cols.length; j++) {
 
                    // Get the text data of each cell
                    // of a row and push it to csvrow
                    csvrow.push(cols[j].innerHTML);
                }
 
                // Combine each column value with comma
                csv_data.push(csvrow.join(","));
            }
 
            // Combine each row data with new line character
            csv_data = csv_data.join('\n');
 
            // Call this function to download csv file 
            downloadCSVFile(csv_data);
 
        }
 
        function downloadCSVFile(csv_data) {
 
            // Create CSV file object and feed
            // our csv_data into it
            CSVFile = new Blob([csv_data], {
                type: "text/csv"
            });
 
            // Create to temporary link to intiate
            // download process
            var temp_link = document.createElement('a');
 
            // Download csv file
            temp_link.download = "GfG.csv";
            var url = window.URL.createObjectURL(CSVFile);
            temp_link.href = url;
 
            // This link should not be displayed
            temp_link.style.display = "none";
            document.body.appendChild(temp_link);
 
            // Automatically click the link to
            // trigger download
            temp_link.click();
            document.body.removeChild(temp_link);
        }
    

 

输出：

Html 表到 CSV 文件