How to download My Html table data into googlesheets or csv using javascript

问题

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);
}

回答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 the Spreadsheets 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>

来源：https://stackoverflow.com/questions/62698639/how-to-download-my-html-table-data-into-googlesheets-or-csv-using-javascript