如何使用javascript将我的HTML表格数据下载到googlesheets或csv中 [英] How to download My Html table data into googlesheets or csv using javascript

问题描述

早些时候，我从Google搜索获得的代码运行正常.但是突然间它停止工作了.

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

我的简单目标是将HTML表下载到csv或Googlesheets文件中.

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

我该如何实现?

这是我的html代码

    <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.

这是我从网络搜索中获取的JavaScript:-

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

推荐答案

您的代码中没有使用Google Apps脚本的内容.它纯净的原始JavaScript.但是，如果要将内容添加到Google表格中，则可以使用Apps脚本和 Sheets API的JavaScript客户端，以插入值变成一张纸.

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.

尝试一下:

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>

这篇关于如何使用javascript将我的HTML表格数据下载到googlesheets或csv中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！