Преобразуйте многомерный массив в столбцы файла CSV в JavaScript и сохраните его с помощью букмарклета браузера

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 + все ваши строки с данными) в массив, а затем объединять массив в 1 длинную строку с символом «конец строки» (который может или не может быть) произойдет автоматически, возможно, вам придется поиграть с этим). Затем вы помещаете эту результирующую строку в ссылку / кнопку на вашей странице.

так что-то вроде:

    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 на элемент вашей страницы.