如何使用 javascript 将我的 Html 表数据下载到 googlesheets 或 csv

Question

Earlier My code that I got from google search was working fine. But suddenly it has stopped working.

My simple objective is to download my HTML table into csv or Googlesheets file.

How can I achieve this?

Here is my html code

    <div class="container">

    <div style="width: auto; height: 600px; overflow:scroll;">

    <table class="containers" width="100" id="myTable">
      <thead  id="thead1">
      </thead>

      <tbody id="perf">
      </tbody>
    </table>
    
    </div>
   
    <div class="row">
    <button id="btn" onclick="exportTableToCSV('allowance.csv')" class="waves-effect waves-light btn light-blue"><i class="material-icons left">file_download</i>Download File to csv</button>
    </div>
    </div>

Please note My table is generated dynamically and its working fine. but my code that fires the download option does not work.

here is my JavaScript that I got it from web search:-

function downloadCSV(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV file
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // Create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Hide download link
    downloadLink.style.display = "none";

    // Add the link to DOM
    document.body.appendChild(downloadLink);

    // Click download link
    downloadLink.click();
}



function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");
    
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll("td, th");
        
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
        csv.push(row.join(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename);
}

Answer 1

There is nothing in your code that uses Google Apps Script. Its plain vanilla JavaScript. However if you wanted to add the content to a Google Sheet, then you could use Apps Script, and theSpreadsheets Service or the good old JavaScript client for the Sheets API to insert the values into a sheet.

As you can see from the following snippet, the code is working. I removed styling and added dummy content to the table, but in essence it is the same code you posted. And it works.

Try it:

 function exportTableToCSV(filename) { var csv = []; var rows = document.querySelectorAll("table tr"); for (var i = 0; i < rows.length; i++) { var row = [], cols = rows[i].querySelectorAll("td, th"); for (var j = 0; j < cols.length; j++) row.push(cols[j].innerText); csv.push(row.join(",")); } // Download CSV file downloadCSV(csv.join("\n"), filename); } function downloadCSV(csv, filename) { var csvFile; var downloadLink; // CSV file csvFile = new Blob([csv], { type: "text/csv" }); // Download link downloadLink = document.createElement("a"); // File name downloadLink.download = filename; // Create a link to the file downloadLink.href = window.URL.createObjectURL(csvFile); // Hide download link downloadLink.style.display = "none"; // Add the link to DOM document.body.appendChild(downloadLink); // Click download link downloadLink.click(); }

 <div> <table id="myTable"> <thead id="thead1"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody id="perf"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> </tbody> </table> <br> <button id="btn" onclick="exportTableToCSV('allowance.csv')">Download CSV File</button> </div>