Экспорт цикла JavaScript в CSV - PullRequest
Новая
       4

Экспорт цикла JavaScript в CSV

0 голосов
/ 16 июня 2019

Предположим, у меня есть этот код цикла. 

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

Что мне делать? Я новичок в этом. Спасибо.

Ответы [ 3 ]

1 голос
/ 16 июня 2019

Это решение в JavaScript . Я добавил прослушиватель событий для кнопки, чтобы при ее нажатии она получала outerHTML из <table>.

outerHTML по существу включает открывающие и закрывающие теги элемента, а также содержимое, тогда как innerHTML не включает открывающие и закрывающие теги.

Из MDN Web Docs

Атрибут outerHTML интерфейса Element DOM получает сериализованный фрагмент HTML, описывающий элемент, включая его потомков. Также можно установить замену элемента узлами, проанализированными из заданной строки.

Когда innerText извлекается из всех строк и столбцов. download_csv называется.

Вы можете загрузить данные, используя объект 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>
1 голос
/ 16 июня 2019

Хороший ответ здесь от 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>
0 голосов
/ 16 июня 2019

Я не знаю, чего вы пытаетесь достичь в своей последней строке, но это не похоже на dataURL, dataURL выглядит так:

данные: [] [; base64],

Теперь, как говорится, идея состоит в том, чтобы создать URL объекта с помощью комбинации Blob и window.URL.createObjectURL: 

 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, в этом случае вы можете добавить элемент a в тело, установите его невидимым, а затем удалите его внутри setTimeout.

Я написал это на простом ES5, вы можете соответственно адаптировать с помощью const, Promise вместо setTimeout и т. Д.

...