好的，我已经创建了这个简单的网站。我们有 10 个输入字段，我们可以将它们的任何值保存在 csv 文件中供以后使用。基本上我得到的是一个 csv 文件，它给我的数据看起来像这样: 1、2、3、4、5、6、7、8、9、10。
好的，现在我在本地存储了我的 csv 文件。现在我关闭我的电脑，改天回来，想加载我本地存储的 csv 文件，以便输入显示我保存 csv 文件时那里的内容。我如何实现这一目标？
//function to download the input as a csv file
function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = new Blob([csv], {
type: "text/csv"
});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
function exportDataToCSV() {
var data1 = $("#input1").val();
var data2 = $("#input2").val();
var data3 = $("#input3").val();
var data4 = $("#input4").val();
var data5 = $("#input5").val();
var data6 = $("#input6").val();
var data7 = $("#input7").val();
var data8 = $("#input8").val();
var data9 = $("#input9").val();
var data10 = $("#input10").val();
var csv = [];
var dataArray = [];
dataArray.push(data1);
dataArray.push(data2);
dataArray.push(data3);
dataArray.push(data4);
dataArray.push(data5);
dataArray.push(data6);
dataArray.push(data7);
dataArray.push(data8);
dataArray.push(data9);
dataArray.push(data10);
csv.push(dataArray);
var temp_fname = ""
if (localStorage.fileName != undefined) {
temp_fname = prompt("Project name: ", localStorage.fileName);
} else {
temp_fname = prompt("Project name: ", "");
}
if (temp_fname != null) {
filename = temp_fname + ".csv";
downloadCSV(csv.join("\n"), filename);
}
}
//Save Button
$("#save").click(function() {
exportDataToCSV();
})
// no closing on accident
window.addEventListener('beforeunload', function(e) {
e.preventDefault();
e.alert("Test");
e.returnValue = '';
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body onbeforeunload=" return 'Are you really want to perform the action?'">
<h1 style="color: green">
This is a simple TestPage
</h1>
<b>Please Type in some inputs so that they can be saved and loaded for later</b>
<p> </p>
<input id="input1">
<input id="input2">
<input id="input3">
<input id="input4">
<input id="input5">
<input id="input6">
<input id="input7">
<input id="input8">
<input id="input9">
<input id="input10">
<br><br><br>
<button id="save"> Save </button>
<button id="load"> Load </button>
</body>这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>
TestPage for inputs
</title>
</head>
<body onbeforeunload=" return 'Are you really want to perform the action?'">
<h1 style="color: green">
This is a simple TestPage
</h1>
<b>Please Type in some inputs so that they can be saved and loaded for later</b>
<p>
</p>
<input id = "input1">
<input id = "input2">
<input id = "input3">
<input id = "input4">
<input id = "input5">
<input id = "input6">
<input id = "input7">
<input id = "input8">
<input id = "input9">
<input id = "input10">
<br><br><br>
<button id = "save"> Save </button>
<button id = "load"> Load </button>
<script type="text/javascript">
//function to download the input as a csv file
function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// CSV file
csvFile = new Blob([csv], {type: "text/csv"});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Hide download link
downloadLink.style.display = "none";
// Add the link to DOM
document.body.appendChild(downloadLink);
// Click download link
downloadLink.click();
}
function exportDataToCSV ()
{
var data1 = $("#input1").val();
var data2 = $("#input2").val();
var data3 = $("#input3").val();
var data4 = $("#input4").val();
var data5 = $("#input5").val();
var data6 = $("#input6").val();
var data7 = $("#input7").val();
var data8 = $("#input8").val();
var data9 = $("#input9").val();
var data10 = $("#input10").val();
var csv = [];
var dataArray = [];
dataArray.push(data1);
dataArray.push(data2);
dataArray.push(data3);
dataArray.push(data4);
dataArray.push(data5);
dataArray.push(data6);
dataArray.push(data7);
dataArray.push(data8);
dataArray.push(data9);
dataArray.push(data10);
csv.push(dataArray);
var temp_fname =""
if (localStorage.fileName!=undefined) {
temp_fname = prompt("Project name: ", localStorage.fileName);
} else {
temp_fname = prompt("Project name: ", "");
}
if (temp_fname != null) {
filename = temp_fname+".csv";
downloadCSV(csv.join("\n"), filename);
}
}
//Save Button
$("#save").click(function(){
exportDataToCSV();
})
// no closing on accident
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.alert("Test");
e.returnValue = '';
});
</script>
</body>
</html>
最佳答案
第一步
在文档加载时检索 csv 文件并使用 jquery 解析它 这是如何做到这一点的链接
$(document).ready(function() {
$.ajax({
type: "GET",
url: "data.txt",
dataType: "text",
success: function(data) {processData(data);}
});
});
function processData(allText) {
var record_num = 5; // or however many elements there are in each row
var allTextLines = allText.split(/\r\n|\n/);
var entries = allTextLines[0].split(',');
var lines = [];
var headings = entries.splice(0,record_num);
while (entries.length>0) {
var tarr = [];
for (var j=0; j<record_num; j++) {
tarr.push(headings[j]+":"+entries.shift());
}
lines.push(tarr);
}
// alert(lines);
}
输出
heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2
解析成json
var data = $.csv.toObjects(lines):
输出
[
{ heading1:"value1_1",heading2:"value2_1",heading3:"value3_1",heading4:"value4_1",heading5:"value5_1" }
{ heading1:"value1_2",heading2:"value2_2",heading3:"value3_2",heading4:"value4_2",heading5:"value5_2" }
]
第 2 步
解析数据后，使用 jQuery 将值分配给输入标签，例如 input.value = parsedValue
关于javascript - 创建了从网站下载所有数据到 csv 文件以备后用的功能。如何重新加载数据到网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59092005/