是否可以在PC本地存儲的xml文件中保存和檢索以HTML格式填充的數據？

Question

我最近制作了一個HTML表單來填寫一些服務報告，現在想在PC上（最好是xml格式）（最好不在服務器上 ）從PC上保存和檢索它們。

我也在w3scools /此頁面上進行了檢查，但仍然無法獲得所需的解決方案。

您能告訴我實現它的可能方法嗎？

Answer 1

據我了解，您想將數據存儲在用戶的計算機上，對嗎？ 然后最好創建一個XML文件並強制下載到用戶的計算機。

（我使用jQuery是因為它速度最快）

步驟1：提出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();
}

Answer 2

您可以像此頁面一樣查看此應用程序（ http://www.cloudformatter.com/Nimbus ）背后的Javascript：

雨雲發票樣本

此代碼顯示（1）將編輯器區域中的數據不斷保存到本地存儲中，（2）用於創建偽HTML / XML文件並下載到磁盤（“保存到...磁盤”）的選項，（3）使該區域的選項相同的軟件包並保存到Web上的存儲中（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