如何在javascript中将csv文件中的数据保存为字符串？

Question

我正在使用Highcharts制作本地html5统计信息页面，我想从自己笔记本电脑中分配的csv文件中获取图表数据。 javascript代码是：

 var arch = new FileReader();
 var content = arch.readAsArrayBuffer('./csvs/sample1.csv');
 //var content = arch.readAsText('./csvs/sample1.csv'.files);
 var sample = $.csv.toArrays(content);
 console.log(sample1);
 $(function () {
    $('#container').highcharts({
        xAxis: {
            min: -0.5,
            max: 5.5
        },
        yAxis: {
            min: 0
        },
        title: {
            text: 'Scatter plot with regression line'
        },
        series: [{
            type: 'line',
            name: 'Regression Line',
            data: [[0, 1.11], [5, 4.51]],
            marker: {
                enabled: true
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        }, {
            type: 'scatter',
            name: 'Observations',
            data: sample,
            marker: {
                radius: 4
            }
        }]
    });
});

我也使用了jquery-csv插件，但是它不起作用。 我已经用fopen测试过了，但是也没有。 控制台告诉我：

未捕获的TypeError：无法在“ FileReader”上执行“ readAsArrayBuffer”：参数1的类型不是“ Blob”。

谢谢。

Answer 1

要读取本地文件，您需要输入类型文件：

  function readSingleFile(evt) { //Retrieve the first (and only!) File from the FileList object var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { var contents = e.target.result; document.getElementById('output').innerHTML = contents; } r.readAsText(f); } else { alert("Failed to load file"); } } document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 

 <input type="file" id="fileinput"/> <textarea id="output" cols="60" rows="10"></textarea> 

Answer 2

您需要将文件读入一个对象，然后将该对象传递给FileReader.readAsXXX方法。

FileReader.readAsArrayBuffer()不带字符串。

这是一些对您有帮助的API文档。

Answer 3

FileReader.readAsArrayBuffer(..)需要Blob作为参数，而不是字符串。 Blob是从文件读取的二进制数据。 您可以在mdn上找到有关FileReader的文档。

它告诉我们，我们可以通过一个File （ 文档 ），而不是太多，我们可以从提取FileList （ 文档 ）。

您不能直接从计算机读取文件。 那将是一个重大的安全漏洞。 我们需要做的是有一个输入元素，我们可以在其中选择文件，也可以将文件拖放到其中。 然后，我们读取文件并执行您的代码：

<input type="file" id="myfile"> <input type="button" id="csvbutton" value="Load">

和javascript：

$("#csvbutton").on( "click", function() {
  var file = $("#myfile")[0].files[0];
  if( file == undefined ) {
    //RIP
    return;
  }
  var arch = new FileReader();
  var content = arch.readAsArrayBuffer(file);
  //etc
} );