将多维数组转换为 JavaScript 中 CSV 文件的列并使用浏览器书签保存

Question

在浏览器中使用 Javascript 运行使用小书签，我的 objective 是从网页上的链接收集数据，然后将其放入格式化的 CSV 文件中以供下载。我看到的任务是：

获取数据
放入数组
格式为 CSV
导出数据（作为可下载文件，或在浏览器中加载以手动保存）

我已经完成了 1 和 2，为我提供了一个数组数组作为 table 的列。我停留在 3 和 4 上。这是数据示例：

// test data for 'const' column (length of array will be variable)
var dataColumn = ["tt0468569", "tt0111161", "tt1795369", "tt7738450"];

// making arrays for other columns in export table (most of the other columns will be empty)
var emptyArray = Array(dataColumn.length).fill('')
var titleType = Array(dataColumn.length).fill('Feature Film')

// make array of arrays (columns) ready to export as csv
var dataTable = [emptyArray,dataColumn,emptyArray,emptyArray,emptyArray,emptyArray,titleType,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray,emptyArray];

// column headers for table
var tableHeaders = ["position","const","created","modified","description","Title","Title type","Directors","You rated","IMDb Rating","Runtime (mins)","Year","Genres","Num. Votes","Release Date (month/day/year)","URL"]

我想要的输出：

position,const,created,modified,description,Title,Title type,Directors,You rated,IMDb Rating,Runtime (mins),Year,Genres,Num. Votes,Release Date (month/day/year),URL
,tt0468569,,,,,Feature Film,,,,,,,,,
,tt0111161,,,,,Feature Film,,,,,,,,,
,tt1795369,,,,,Feature Film,,,,,,,,,
,tt7738450,,,,,Feature Film,,,,,,,,,

Answer 1

一种方法是 - 格式化应该只是将所有单独的行（TableHeader + 所有数据表行）输出到一个数组中，然后将数组连接成一个带有 'end of line' 符号的长字符串（可能或可能不会自动发生，你可能需要玩这个）。然后将生成的字符串放入页面上的 link/button。

所以类似的东西：

    var OutString = [];
    // your existing code here for defining the headers
    OutString[0] = TableHeader
 for (var i = 1; i < LineCount; ++i) { // looping mechanism through pickup from the page
// your existing code here for picking up the details
      OutString[i] = dataTable
     }
    TestFunc += OutString.join(''); // or whatever you want your end of line to be
    OutPutLine = '<a href="data:text/plain;charset=UTF-8, ' + encodeURIComponent(TestFunc) + '" download="' + decodeURIComponent(escape('your file name here')) +'">{optional button etc here}</a>';

然后将 OutPutLine 写入您的页面元素。

Answer 2

您几乎完成了数组的创建，只需要更改创建 tableData 的方法。不要将 tableData 附加为一组数组作为 empty array 和 title array，而是需要相应地映射它们。

看看下面的片段：

function downloadExcel() {
  var dataColumn = ["tt0468569", "tt0111161", "tt1795369", "tt7738450"];
  var tableHeaders = ["position", "const", "created", "modified", "description", "Title", "Title type", "Directors", "You rated", "IMDb Rating", "Runtime (mins)", "Year", "Genres", "Num. Votes", "Release Date (month/day/year)", "URL"];

  //now a container for the excel data i.e. tableHeaders+datacreated:
  var dataTable = new Array();
  dataTable.push(tableHeaders);

  //now looping around the data
  dataColumn.forEach(function(col) {
    dataTable.push(['', col, '', '', '', '', 'Feature Film', '', '', '', '', '', '', '', '', '']);
  });

  //now converting the array given into a `csv` content
  let csvContent = "data:text/csv;charset=utf-8,";
  dataTable.forEach(function(rowArray) {
    let row = rowArray.join(",");
    csvContent += row + "\r\n";
  });

  //calling the csv download via anchor tag(link) so we can provide a name for the file
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.style.display = 'none';
  link.setAttribute("download", "myCSV.csv"); //change it to give your own name
  link.innerHTML = "Click Here to download";
  document.body.appendChild(link); // Required for FF

  link.click();
  link.remove(); //removing the link after the download
}

<button onclick="downloadExcel()">Click me to Download excel</button>

将多维数组转换为 JavaScript 中 CSV 文件的列并使用浏览器书签保存

Convert a multidimensional array to columns of a CSV file in JavaScript and save using a browser bookmarklet

javascript

csv

arrays

bookmarklet

export-to-csv