0

好的，所以我创建了这个简单的网站。我们有 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>
4

1 回答 1

1

步骤1

在文档加载时检索 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 数据 = $.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

于 2019-11-28T15:28:56.417 回答