Question

我正在尝试从Javascript数据输入生成csv文件。每行都必须来自下一个输入周期。

它不输出任何CSV。

每个输入周期必须同时使用添加和更新按钮，以生成新的csv行。由于某种原因，在其中任何一个中进行注释时，“。innnerhtml”均不起作用。

这是我的代码：

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>
<a href='#' onclick='downloadCSV({ filename: "data-" + ID + ".csv" });'><button title = "download data">⬇️</button></a>
<button onclick="update()">update</button>
<button onclick="add()">add</button>
<script>
function add() {
var ID = prompt("Please enter your email address (One per user)");
var HR = prompt("Please enter your HeartRate");
var TIME = prompt("please enter the time");
var PREDICTION = prompt("Please enter your HR prediction")
var biodata = [
        {
            ID: ID,
            HR: "65",
            TIME: "8",
            PREDICTION: "68",
            }
    ];
  }

function update() {
var row = {};
row[ID] = biodata.ID;
row[HR] = biodata.HR;
row[TIME] = biodata.TIME;
row[PREDICTION] = biodata.PREDICTION;
biodata.push(row);
//document.getElementById("demo").innerHTML = biodata;
}

function convertArrayOfObjectsToCSV(args) {
    var result, ctr, keys, columnDelimiter, lineDelimiter, data;

    data = args.data || null;
    if (data == null || !data.length) {
        return null;
    }

    columnDelimiter = args.columnDelimiter || ',';
    lineDelimiter = args.lineDelimiter || '\n';

    keys = Object.keys(data[0]);

    result = '';
    result += keys.join(columnDelimiter);
    result += lineDelimiter;

    data.forEach(function(item) {
        ctr = 0;
        keys.forEach(function(key) {
            if (ctr > 0) result += columnDelimiter;

            result += item[key];
            ctr++;
        });
        result += lineDelimiter;
    });

    return result;
}

function downloadCSV(args) {
    var data, filename, link;

    var csv = convertArrayOfObjectsToCSV({
        data: biodata
    });
    if (csv == null) return;

    filename = args.filename || "data-" + ID + ".csv"; //changed to double qoutes.

    if (!csv.match(/^data:text\/csv/i)) {
        csv = 'data:text/csv;charset=utf-8,' + csv;
    }
    data = encodeURI(csv);

    link = document.createElement('a');
    link.setAttribute('href', data);
    link.setAttribute('download', filename);
    link.click();
}
</script>

</body>
</html>

Answer 1

您的ID和biodata变量在add()函数的范围内声明，但在您的HTML和downloadCSV()函数中被内联引用。一种可能的解决方案是将它们声明为全局变量：

<script>
    var ID;
    var biodata;

    function add() {
        ID = prompt("Please enter your email address (One per user)");
        var HR = prompt("Please enter your HeartRate");
        var TIME = prompt("please enter the time");
        var PREDICTION = prompt("Please enter your HR prediction")
        biodata = [
        ...

代替

<script>

    function add() {
        var ID = prompt("Please enter your email address (One per user)");
        var HR = prompt("Please enter your HeartRate");
        var TIME = prompt("please enter the time");
        var PREDICTION = prompt("Please enter your HR prediction")
        var biodata = [
        ...

Answer 2

这是简化的解决方案：

JS：

var USER = prompt("Please enter your initials");
var TIME = "TIME";
var BPM = "BPM";
var PRED = "PRED";
var value = "0";
var data = [
   [USER, TIME, BPM, PRED]
];
function download_csv() {
    var csv = 'USER,TIME,BPM,PRED\n';
    data.forEach(function(row) {
            csv += row.join(',');
            csv += "\n";
    });

    console.log(csv);
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    filename = USER + "-biodata.csv";
    hiddenElement.download = filename;
    hiddenElement.click();
}

function appendcsv() {

  data.push([USER, TIME, BPM, PRED]);
//adds new row of data from updated values from loop.
}

HTML：

<button title = "download bio data" onclick="download_csv()">EXPORT</button></a>
<button title = "add row of data" onclick="appendcsv()">Add row</button></a>

javascript至CSV行未输出

2 个答案: