如何将数据从 javascript 中的 csv 文件保存为字符串?
How to save the data as a string from a csv file in javascript?
我正在使用 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 进行了测试,但也没有。控制台告诉我:
未捕获类型错误:无法在 'FileReader' 上执行 'readAsArrayBuffer':参数 1 不是 'Blob' 类型。
谢谢。
您需要将文件读入一个对象,然后将该对象传递给您的 FileReader.readAsXXX
方法。
FileReader.readAsArrayBuffer()
不接受字符串。
Here 是一些 API 文档,可能对您有所帮助。
要读取本地文件,您需要输入类型文件:
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>
FileReader.readAsArrayBuffer(..)
需要一个 Blob 作为参数,而不是字符串。 blob 是二进制数据,从文件中读取。您可以在 mdn.
上找到有关 FileReader 的文档
它告诉我们可以通过一个File
(docs) instead too, which we can extract from a FileList
(docs).
您无法直接从计算机读取文件。那将是一个重大的安全漏洞。我们需要做的是有一个输入元素,我们可以在其中 select 文件,或者将文件拖放到其中。然后我们读取文件并执行你的代码:
<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
} );
我正在使用 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 进行了测试,但也没有。控制台告诉我:
未捕获类型错误:无法在 'FileReader' 上执行 'readAsArrayBuffer':参数 1 不是 'Blob' 类型。
谢谢。
您需要将文件读入一个对象,然后将该对象传递给您的 FileReader.readAsXXX
方法。
FileReader.readAsArrayBuffer()
不接受字符串。
Here 是一些 API 文档,可能对您有所帮助。
要读取本地文件,您需要输入类型文件:
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>
FileReader.readAsArrayBuffer(..)
需要一个 Blob 作为参数,而不是字符串。 blob 是二进制数据,从文件中读取。您可以在 mdn.
它告诉我们可以通过一个File
(docs) instead too, which we can extract from a FileList
(docs).
您无法直接从计算机读取文件。那将是一个重大的安全漏洞。我们需要做的是有一个输入元素,我们可以在其中 select 文件,或者将文件拖放到其中。然后我们读取文件并执行你的代码:
<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
} );