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

Question

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

1. 获取数据
2. 把它放到数组中
3. 格式为CSV
4. 导出数据（作为可下载文件，或在浏览器中加载以手动保存）

我做了1和2，给了我一个数组数组作为表的列。我被困在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

你几乎完成了创建数组，只需要改变创建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>

Answer 2

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

所以有些东西：

    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写入您的页面元素。