在Javascript中将html表导出到csv答案

【问题标题】：Export html table to csv in Javascript在Javascript中将html表导出到csv
【发布时间】：2020-05-11 16:01:38
【问题描述】：

我有两个功能

导出 HTML 表格下载 CSV 文件

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table tr");

    for(var i = 0; i < rows.length; i++){
        var row = [], cols = rows[i].querySelectorAll("td, th");
        for(var j = 0; j < cols.length; j++){
            row.push(cols[j].innerText);
        }
        csv.push(row.join(","));
    }

    // download csv file
    downloadCSV(csv.join("\n"), filename);
}

function downloadCSV(csv, filename) {
        var csvFile;
    var downloadLink;

    csvFile = new Blob([csv], {type:"text/csv"});
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
}

exportTableToCSV('test.csv');

我这里有一个情况，这段代码在有数组的地方工作得很好

[1,2] [3,4] [5,6]

但如果数据是

[1,"example1,data1",10] [2,"example1,data2",20]

csv 文件为 example1 和 data 1 生成两个额外的列。我们如何确保“example1,data1”都保留在一个列中。数组中有多个逗号的字符串如何实现？

谢谢，

斯瓦提

【问题讨论】：

标签： javascript csv download

【解决方案1】：

//dataToBeDocumented= [{object},{object},{object}] 应该是这个格式

function ConvertToCSV(objArray) {
  var array = typeof objArray != "object" ? JSON.parse(objArray) : objArray;
  try {
    var str = "";
    var obj = array[0] ? array[0] : null;
    var res = Object.keys(obj);
  } catch (err) {
    return err;
  }

  res = res.join(",");
  // console.log(res);
  for (var i = 0; i < array.length; i++) {
    var line = "";
    for (var index in array[i]) {
      if (line !== "") line += ",";

      line += array[i][index];
    }

    str += line + "\r\n";
  }
  // console.log(str);
  return res + "\r\n" + str;
}

function makeCSV(content, outputFileName) {
    this.content = content;
    if (typeof this.content === "string") {
      this.content = JSON.parse(this.content);
    }
    try {
      var uri = "data:text/csv;charset=utf-8," + ConvertToCSV(this.content);
    } catch (err) {
      throw err;
    }
    var downloadLink = document.createElement("a");
    downloadLink.href = uri;
    var opFileName = `${outputFileName}.csv`;
    // console.log(opFileName);
    downloadLink.download = opFileName;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }

【讨论】：