是否有可能节省& &;检索在HTML表单中填写的数据到/从本地存储在PC上的xml文件

Is it possible to save & retrieve the data filled in HTML form to/from xml file stored locally on PC?

本文关键字：存储 文件 上的 PC 数据 xml 检索 节省 有可能 HTML 表单      更新时间：2023-09-26

我最近制作了一个HTML表单来填写一些服务报告&现在想节省& &;检索他们在/从PC本身(最好是xml格式)(不在服务器)。

我已经在w3schools/这个页面上查过了，但我仍然没有得到想要的解决方案。

你能告诉我可能的实现方法吗?

您可以查看此应用程序(http://www.cloudformatter.com/Nimbus)背后的Javascript，如下面的页面:

云雾发票样品

这段代码显示了(1)编辑器区域中的数据不断保存到本地存储，(2)选择制作一个伪HTML/XML文件并下载到磁盘(Save to…)(3)选择制作相同的包并保存到网络存储(New Nimble, save Nimble)。我不打算遍历所有的代码，下面最相关的是将存储在变量"archive"中的包本地保存到磁盘:

function SaveFile(archive) {
var textToBLOB = new Blob([archive.innerHTML], { type: 'text/xml' });
var sFileName = 'varypackage.html';
var newLink = document.createElement('a');
newLink.download = sFileName;
if (window.webkitURL !== null) {
  newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
  newLink.href = window.URL.createObjectURL(textToBLOB);
  newLink.style.display = 'none';
  document.body.appendChild(newLink);
}
newLink.click();

}

查看这里的所有代码(其中包含更多的只是保存/加载，但它在这里):http://www.cloudformatter.com/Resources/pages/varyhtml/script/02_control.js

如果我没理解错，您是想将数据存储在用户的计算机上，对吗?然后最好创建一个XML文件并强制下载到用户的计算机上。

(我使用jQuery，因为它是最快的)

第一步:发出一个ajax请求。

    function downloadFormData(form){
        var formData= $(form).serialize(); //form is an DOM element - the form you want to retrieve data from
        $.ajax({
            url:"save.php",
            data: formData,
            success: function (file) {
                window.location.href =  "download.php?path="+ file
            }
        });   
    }

2)创建一个php文件，命名为save.php，在根目录下包含以下内容:

    <?php
    $xml_string = "<?xml version etc.?><data>";
    foreach($_POST as $key=>$value)
        $xml_string.='<'.$key.'>'.$value.'</'.$key.'>';
    $xml_string.='</data>
    $file = 'formData.xml';


    // save to file
    file_put_contents('./'.$file, $xml_string);
    // return the filename
    echo $file; exit;
5)创建一个php文件，命名为download.php，并在根目录 中包含以下内容
<?php
$file = 'formData.xml'
// $file = trim($_GET['path']); if you use download.php for anything else
// force user to download the file
if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/xml');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    unlink($file);
    exit;
}
else {
    echo "$file not found";
}

我希望你明白这是如何工作的，因为你绝对不能让一切都这样(然后用户可以下载任何他们想要的文件)，但我希望我的答案会帮助你。

编辑:一个纯javascript解决方案

function createXMLandDownload(form){
    var a = document.createElement("a");
    a.download = "MyXml.xml"; //downloaded file name
    a.addEventListener("click" , function (){
        var xmlstring = '<?xml version="1.0" encoding="utf-8"?><data>';
        $(form).find(":input").each(function(){
            xmlstring+="<"+this.name+">"+this.value+"</"+this.name+">";
        }
        xmlstring+="</data>";
        document.open('data:Application/octet-stream,' + encodeURIComponent(xmlstring ));
    });
    a.click();
}
相关文章：