使用javascript将文件下载为.csv文件

您好，我正在尝试将文件导出为.csv文件，这样当用户单击下载按钮时，浏览器将自动将文件下载为.csv文件。 我还希望能够为要导出的.csv文件设置名称

我正在使用javascript来实现这一点

代码如下：

 function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            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';
        }

        return str;
    }

    // Example
    $(document).ready(function () {

        // Create Object
        var items = [
              { "name": "Item 1", "color": "Green", "size": "X-Large" },
              { "name": "Item 2", "color": "Green", "size": "X-Large" },
              { "name": "Item 3", "color": "Green", "size": "X-Large" }];

        // Convert Object to JSON
        var jsonObject = JSON.stringify(items);

        // Display JSON
        $('#json').text(jsonObject);

        // Convert JSON to CSV & Display CSV
        $('#csv').text(ConvertToCSV(jsonObject));

        $("#download").click(function() {
            alert("2");
            var csv = ConvertToCSV(jsonObject);
            window.open("data:text/csv;charset=utf-8," + escape(csv))
            ///////


        });

    });

函数ConvertToCSV（objArray）{
var array=typeof objArray！=“object”？JSON.parse（objArray）：objArray；
var-str=''；
对于（var i=0；i

请就此提出建议 我的老板在这个问题上对我唠叨个没完

---

请帮助

在现代浏览器中，锚中有一个新属性

下载

因此，与其使用

window.open("data:text/csv;charset=utf-8," + escape(csv))

创建下载链接：

<a href="data:text/csv;charset=utf-8,'+escape(csv)+'" download="filename.csv">download</a>

---

我在这篇文章中写了一个解决方案：

这是一个简单的解决方案：

 $("#download_1").click(function() {
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
var json = $.parseJSON(json_pre);

var csv = JSON2CSV(json);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});

JSON2CSV函数

function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var line = '';

    if ($("#labels").is(':checked')) {
        var head = array[0];
        if ($("#quote").is(':checked')) {
            for (var index in array[0]) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[0]) {
                line += index + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '\r\n';
    }
    return str;
}

函数JSON2CSV（objArray）{ var array=typeof objArray！=“object”？JSON.parse（objArray）：objArray； var-str=''； var行=“”； 如果（$（“#标签”）。是（'：选中的'））{ 变量头=数组[0]； 如果（$（“#quote”）。是（'：选中的'））{ for（数组[0]中的变量索引）{ var值=指数+“”； 行+=''“'+值。替换（/“/g'”）+''，'； } }否则{ for（数组[0]中的变量索引）{ 行+=索引+'，'； } } line=line.slice（0，-1）； str+=line+'\r\n'； } 对于（var i=0；i我只是想在这里为将来的人们添加一些代码，因为我正在尝试将JSON导出到CSV文档并下载它

我使用

$.getJSON

从外部页面提取json数据，但如果您有一个基本数组，就可以使用它

这将使用代码创建csv数据

$(document).ready(function() {
    var JSONData = $.getJSON("GetJsonData.php", function(data) {
        var items = data;
        const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
        const header = Object.keys(items[0]);
        let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
        csv.unshift(header.join(','));
        csv = csv.join('\r\n');

        //Download the file as CSV
        var downloadLink = document.createElement("a");
        var blob = new Blob(["\ufeff", csv]);
        var url = URL.createObjectURL(blob);
        downloadLink.href = url;
        downloadLink.download = "DataDump.csv";  //Name the file here
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    });
});

编辑：值得注意的是，

JSON.stringify

将通过添加

\“

对引号中的引号进行转义。如果在excel中查看CSV，它不喜欢将其作为转义字符

您可以将

.replace（/\\“/g，”）

添加到

JSON.stringify（row[fieldName]，replace）

的末尾，以在excel中正确显示此内容（这将用excel喜欢的

\“

替换

）

整行：
JSON.stringify（行[fieldName]，replace）.replace（/\\\\“/g，”）
尝试以下示例：

例1：

JsonArray = [{
    "AccountNumber": "1234",
    "AccountName": "abc",
    "port": "All",
    "source": "sg-a78c04f8"

}, {
    "Account Number": "1234",
    "Account Name": "abc",
    "port": 22,
    "source": "0.0.0.0/0",
}]

JsonFields = ["Account Number","Account Name","port","source"]

function JsonToCSV(){
    var csvStr = JsonFields.join(",") + "\n";

    JsonArray.forEach(element => {
        AccountNumber = element.AccountNumber;
        AccountName   = element.AccountName;
        port          = element.port
        source        = element.source

        csvStr += AccountNumber + ',' + AccountName + ','  + port + ',' + source + "\n";
        })
        return csvStr;
}

您可以使用以下代码下载csv文件：

function downloadCSV(csvStr) {

    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvStr);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'output.csv';
    hiddenElement.click();
}

如果数据来自SQL数据库，则所有行的结构都应该相同，但如果数据来自NoSQL数据库，则使用标准答案可能会有问题。我详细阐述了上述JSON2CSV用于这种场景。
Json数据示例

  [ {"meal":2387,"food":"beaf"},
    {"meal":2387,"food":"apple","peeled":"yes", "speed":"fast" },
    {"meal":2387,"food":"pear", "speed":"slow", "peeled":"yes" } ]

答复

"meal","food","peeled","speed"
"2387","beaf","",""
"2387","apple","yes","fast"
"2387","pear","yes","slow"

标题和双引号的代码非常简单

function JSON2CSV(objArray) {
  var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

  var str = '';
  var line = '';

  // get all distinct keys      
  let titles = [];
  for (var i = 0; i < array.length; i++) {
    let obj = array[i];
    Object.entries(obj).forEach(([key,value])=>{
      //console.log('key=', key, "   val=", value );
      if (titles.includes(key) ) {
        // console.log (key , 'exists');
        null;
      }
      else {
        titles.push(key);
      }
    })
  }
  let htext =  '"' + titles.join('","') + '"';
  console.log('header:', htext);
  // add to str
  str += htext + '\r\n';
  //
  // lines
  for (var i = 0; i < array.length; i++) {
    var line = '';
    // get values by header order
    for (var j = 0; j < titles.length; j++) {
      // match keys with current header
      let obj = array[i];
      let keyfound = 0;    
      // each key/value pair
      Object.entries(obj).forEach(([key,value])=>{
        if (key == titles[j]) {
          // console.log('equal tit=', titles[j] , ' e key ', key ); // matched key with header
          line += ',"' + value +  '"';
          keyfound = 1; 
          return false;
        }

      })
      if (keyfound == 0) {
        line += ',"'  +  '"';   // add null value for this key
      } // end loop of header values

    }

    str += line.slice(1) + '\r\n';
  }
  return str;
}

函数JSON2CSV（objArray）{
var array=typeof objArray！=“object”？JSON.parse（objArray）：objArray；
var-str=''；
var行=“”；
//获取所有不同的密钥
让标题=[]；
对于（var i=0；i{
//log（'key='，key，“val=”，value）；
if（标题包括（关键））{
//console.log（键“exists”）；
无效的
}
否则{
标题。按（键）；
}
})
}
让htext='“'+titles.join（'”，“）+'”；
log（'header:'，htext）；
//添加到str
str+=htext+'\r\n'；
//
//线条
对于（var i=0；i{
如果（键==标题[j]）{
//log（'equal tit='，titles[j]，'e key'，key）；//匹配的key和header
行+='，“'+值+”；
keyfound=1；
返回false；
}
})
if（keyfound==0）{
第+='，“++'”；//为该键添加空值
}//头值的结束循环
}
str+=line.slice（1）+'\r\n'；
}
返回str；
}

一个用于带有静态标题的简单JSON的线性函数

假设arr是JSON数组，您还可以用逗号分隔的标题替换第一个字符串，标题结尾为

\n

arr.reduce((acc, curr) => (`${acc}${Object.values(curr).join(",")}\n`), "")

或者使用前面提到的window.open功能

window.open(`data:text/csv;charset=utf-8,${arr.reduce((acc, curr) => (`${acc}${Object.values(curr).join(",")}\n`), "")}`)

你知道吗

window.open(`data:text/csv;charset=utf-8,${arr.reduce((acc, curr) => (`${acc}${Object.values(curr).join(",")}\n`), "")}`)