从客户端将 HTML 表保存到服务器上的 CSV答案

【问题标题】：Saving HTML table to CSV on server from client side从客户端将 HTML 表保存到服务器上的 CSV
【发布时间】：2021-07-27 00:24:42
【问题描述】：

我正在尝试读取一个 .dat 文件（它是一个带有分隔符';' 的 CSV）并将其转换为一个表格并在 PHP 中完成，如下所示：

<table id='sol'>
<?php
echo "<html><body>";
$f = fopen("/var/www/html/uploads/data_old.dat", "r");
$var = 0;

/* Writes the CSV to table in the page*/
while (($line = fgetcsv($f, 0, ';')) !== false) {
    
    echo "<tr>";
    foreach ($line as $cell) {
        if ($var < 36) {
            echo "<th>" . htmlspecialchars($cell) . "</th>";
            $var = $var + 1;
        }
        else {
            echo "<td><div contenteditable>" . htmlspecialchars($cell) . "</div></td>";
        }
    }
    echo "</tr>";

}

fclose($f);
echo "</body></html>";
?>
</table>

现在在编辑完表格中的值后，我需要将该表格保存在服务器上。 目前，我可以使用 JS 编写的脚本下载 .dat 中的表格，如下所示： p>

// Quick and simple export target #table_id into a csv
function download_table_as_csv(table_id, separator = ';') {
    // Select rows from table_id
    var rows = document.querySelectorAll('table#' + table_id + ' tr');
    // Construct csv
    var csv = [];
    for (var i = 0; i < rows.length; i++) {
        var row = [], cols = rows[i].querySelectorAll('td, th');
        for (var j = 0; j < cols.length; j++) {
            // Clean innertext to remove multiple spaces and jumpline (break csv)
            var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ')
            // Escape double-quote with double-double-quote 
            data = data.replace(/"/g, '""');
            // Push escaped string
            row.push('"' + data + '"');
        }
        csv.push(row.join(separator));
    }
    var csv_string = csv.join('\n');
    // Download it
    var filename = 'data_new' + '.dat';
    var link = document.createElement('a');
    link.style.display = 'none';
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv_string));
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

我对此很陌生，非常感谢任何帮助。

【问题讨论】：

不能保存到服务器，但是可以通过AJAX请求上传。
@MarkusZeller 感谢您的评论。目前，我正在使用上面的脚本下载，然后通过 HTML（带有调用 PHP 和方法 post 的操作的表单标签）和 PHP（move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $目标文件））。是否可以使用 AJAX 请求来避免这个额外的下载和上传步骤？
您是要让用户下载他们刚刚上传的 CSV 文件，还是要更改 CSV 中的值，然后让他们下载新副本？试图弄清楚你到底想要完成什么。

标签： javascript php html fgetcsv

【解决方案1】：

我可能不明白这里的问题，但我认为它类似于“我从用户那里得到一个 csv 文件 - 如何将文件的字段显示为 HTML 表格，然后为新编辑的文件设置下载链接”

如果这听起来正确，那么这可能就是您想要的。您正确地将 CSV 显示为 HTML 表格（据我所知）。

如果htmlspecialchars(..) 更改了data_old.dat 发出的字符，那么我们开始编写一个新的CVS 文件，我们将在其中放置htmlspacechars(..) 发出的更改 - 你自己在分隔符中添加;（如你注意到了）。

$f_ = fopen("/var/www/html/uploads/data_new.dat", "w");

我们希望用户下载哪个文件，只需将其放在<a href='...'> 标记内即可。

<?php echo "<a href='uploads/data_new.data'>download</a>" ?>

进一步（获取用户编辑）：

虽然上面的示例告诉我们如何为下载文件的用户设置后端，但它并没有概述用户提交编辑的方式以及后端了解它的方式。要让服务器知道用户的编辑，正如 cmets AJAX 中提到的，这是 php 的方式。

AJAX 是 Javascript 将 XML（正文）符号作为 http 请求发送到后端。它的工作方式如下图所示。

AJAX 由浏览器中的 javascript 访问（嘿，用户在哪里！）

var xhttp = new XMLHttpRequest(); // setup object
// hook function
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // this is ran after we get an OK from the server.
       // after they've committed a change
    }
};
// setup request
xhttp.open("GET", "link/to/your/website", true)
xhttp.send(); // send it

AJAX playground

到目前为止，它对它的描述非常模糊，现在让我们看看如何使用它。

所以想法是当用户更改表中的字段时，我们运行一些 javascript 来发送 AJAX 请求。指定他们改变了什么。服务器收到请求，在后端更新更改，然后将 OK 发送回客户端。

希望这会有所帮助。

【讨论】：

感谢您的评论。实际上，用户上传一个.dat，然后它会显示在一个表格中，用户可以编辑其中的值，然后他需要下载它。但是，有一个 python 脚本用于查找用户所做的更改并插入时间戳。所以，我目前正在做的是下载时间未更新的编辑表并将其上传到服务器并从PHP调用python脚本。
我想要的是，删除下载已编辑的表格（时间未更新）并上传以进行时间更新的步骤。因此，一次编辑的表格将被保存在服务器上，并由 python 脚本使用来更新时间。
@Ramsey 我编辑了这篇文章，希望能详细说明 AJAX 的轮廓。如果您还有其他问题，请告诉我。
非常感谢您的详细解释。我会尝试使用您提供的资源来实施它，如果我遇到任何疑问，我一定会联系您。