Question

假设我有这个循环代码。

for (var i = 0; i < originList.length; i++) {
          var results = response.rows[i].elements;
          for (var j = 0; j < results.length; j++) {
            outputDiv.innerHTML += results[j].distance.text + ',';
          }
        }

我想使用此代码将outputDiv.innerHTML导出到CSV，但这是行不通的。

function downloadFile(fileName, urlData) {

var aLink = document.createElement('a');
aLink.download = fileName;
aLink.href = urlData;

var event = new MouseEvent('click');
aLink.dispatchEvent(event);
}

downloadFile('output.csv', 'outputDiv.innerHTML/csv;charset=UTF-8,' + encodeURIComponent(outputDiv.innerHTML));

我该怎么办？我是新来的。谢谢。

Answer 1

here的dandavis很好的答案：

http://danml.com/js/download.js会使用一个库，请确保您的div内容包含逗号分隔的内容。

var csv = jQuery(".list").map(function(a, i) {
  return $.trim($(this).text()).split(/\s*\n\s*/).join(",");
}).toArray().join("\r\n");

alert(csv); // Contents
// Download
// download(csv, "tabledata.csv", "text/csv");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://danml.com/js/download.js"></script> <!-- CSV -->
<div class="list">
  1, 2, 3
</div>

Answer 2

此解决方案位于 JavaScript 中。我在按钮上添加了事件监听器，因此单击该按钮后，它将捕获outerHTML中的<table>。

outerHTML本质上包括元素的开始和结束标记以及内容，而innerHTML 不包含标签。

来自MDN Web Docs

Element DOM接口的 outerHTML 属性获取描述元素（包括其后代）的序列化HTML片段。也可以设置为将元素替换为从给定字符串解析的节点。

从所有行和列中提取innerText时。 download_csv被调用。

您可以使用file-like object of immutable, raw data这个Blob对象下载数据。

document.querySelector("button").addEventListener("click", function () {
  let html = document.querySelector("table").outerHTML;
  exportToCSV(html, "table.csv");
});

function exportToCSV(html, filename) {
  let csv = [];
  
  // grab all rows inside table
  let rows = document.querySelectorAll("table tr");
  let row, cols;
  
  for (let i = 0; i < rows.length; i++) {
    row = []; // will hold innerText of all columns
    // retrieve all columns of row
    cols = rows[i].querySelectorAll("td, th");
    
    for (let j = 0; j < cols.length; j++){
      // push column innerText
      row.push(cols[j].innerText);
    }
    
    // push all innerText into CSV
    csv.push(row.join(","));		
  }
  
  console.log("Extracted content from html:",csv);
  // Download CSV
  download_csv(csv.join("\n"), filename);
}

function download_csv(csv, filename) {
  let csvFile;
  let downloadLink;

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

  // create an element and set the file name.
  downloadLink = document.createElement("a");
  downloadLink.download = filename;

  // We have to create a link to the file
  downloadLink.href = window.URL.createObjectURL(csvFile);
  
  // prevent link from being shown
  downloadLink.style.display = "none";
  
  // Add the link to your DOM
  document.body.appendChild(downloadLink);

  // start the download
  downloadLink.click();
}

<table>
    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
    <tr><td>Tony</td><td>26</td><td>USA</td></tr>
    <tr><td>Levi</td><td>19</td><td>Spain</td></tr>
    <tr><td>Calvin</td><td>32</td><td>Russia</td></tr>
</table>
<button>Export HTML table to CSV file</button>

Answer 3

我不知道您要在最后一行尝试实现什么，但这看起来不像dataURL，dataURL看起来像：

data：[] [; base64]，

现在可以这样说，其想法是通过Blob和window.URL.createObjectURL的组合来创建对象url：

 function dL(input,fileName){
     var blob = new Blob(input,{type:"text/csv"}),
         url = window.URL.createObjectURL(blob),
         aElem = document.createElement("a"),
         fileName = "deogenResults.txt";
     aElem.setAttribute("href",url);
     aElem.setAttribute("download",fileName);
     if (window.navigator.constructor.prototype.hasOwnProperty("msSaveBlob")) {
        window.navigator.msSaveBlob(blob,fileName);
     } else if ("download" in aElem) {
        aElem.click();
     } else {
        window.open(url,"_blank");
     }
        setTimeout(function(){window.URL.revokeObjectURL(url)},2000);
}

像这样使用它：dL(outputDiv.innerHTML,"someName")

重要的是要提醒您，某些浏览器可能不允许单击来触发DOM中否的元素，在这种情况下，您可能希望将一个元素附加到正文中，将其设置为不可见，然后在setTimeout中将其删除。

我是在普通的ES5中编写的，您可以使用const，Promise代替setTimeout等声明。

将JavaScript循环导出到CSV

3 个答案: