如何*本地*保存由JavaScript生成的.html文件（運行在* local * .html頁面上）？

所以我一直在研究這幾天，並沒有拿出任何決定性的。我試圖創建一個（非常）基本的liveblogging設置，因爲我不想爲CoverItLive這樣的東西付費。我的過程是：本地HTML文件>雲存儲（Dropbox/Drive/etc）>內容頁面上的iframe。所有這些工作，並與一些CSS甚至看起來相當不錯，儘管不是很好的方法。但這裏的東西：本身是由一個HTML表格的liveblog，我有手動複製/粘貼一個新行的代碼，填寫時間戳，寫入新的信息，並保存文檔（然後與同步雲，並顯示在iframe中）。爲了簡化我做了另一個HTML文件，我打算運行本地和使用條目自動添加到表的過程。目前它只是一堆輸入框和一些javascript來自動化時間戳並從輸入數據中寫入表格行。如何*本地*保存由JavaScript生成的.html文件（運行在* local * .html頁面上）？

代碼，因爲目前的情況是：http://jsfiddle.net/LukeLC/999bH/

我正在尋找在這裏做的是找到一種方法以某種方式產生的表中的數據導出到另一個HTML文件在我的硬盤上。到目前爲止，我已經成功地得到這個代碼...

if(document.documentElement && document.documentElement.innerHTML){ 
     var a=document.getElementById("tblive").innerHTML; 
     a=a.replace(/</g,'&lt;'); 
     var w=window.open(); 
     w.document.open(); 
     w.document.write('<pre>&lt;tblive>\n'+a+'\n&lt;/tblive></pre>'); 
     w.document.close(); 
     } 
    }

...在新窗口中打開剛纔生成的表的代碼，當然，我可以從那裏保存源，但整點是消除這一過程中的步驟。

我怎麼能告訴頁面生成的代碼保存到一個單獨的.html文件，當我點擊「提交」按鈕？再一次，所有這些都發生在本地，而不是在服務器上。

我不是很好用JavaScript - 也許不同的語言將是必要的 - 但任何幫助是非常讚賞。

來源

2014-01-08 LukeLC

我想你可以做這樣的事情：

var myHTMLDoc = "<html><head><title>mydoc</title></head><body>This is a test page</body></html>"; 
var uri = "data:application/octet-stream;base64,"+btoa(myHTMLDoc); 


document.location = uri;

BTW，BTOA可能不跨瀏覽器，我認爲現代瀏覽器都擁有它，但舊版本的IE沒有。 AFAIK base64甚至不需要。你也許可以逃脫

var uri = "data:application/octet-stream,"+myHTMLDoc;

缺點與此的是，你不能設置文件名時，它在瀏覽器中*會保存

來源

2014-01-08 01:30:02 raser

這幾乎做到了我想要的 - 我只需要仔細研究一下代碼，以確保它包含我需要的所有內容。我不想在每次提交時打開一個新窗口，或者不得不處理保存對話框，但如果這些事情不能得到幫助，這比手動完成任何事情都要好得多。 – LukeLC

我還應該提到，如果創建'a'元素並將其href設置爲data-URI，並將下載屬性設置爲文件名（有點像@Pogrindis的做法），我想出了一種方法來更改保存名稱。，然後將它添加到DOM並調用'.click（）'。（在FF和鉻中測試） – raser

這仍然有效嗎？我在IE11中測試過它，但它問我用什麼程序打開「數據」。而且，如果我試圖挽救它，它說無法保存。 – Kosmos

答案很簡單，你不能。由於安全原因，JavaScript受限於執行此類操作。

來實現這一目標的最好辦法，是來調用一個會寫服務器上的新文件的服務器頁面。然後從JavaScript執行POST請求到服務器頁面，將想要寫入新數據的數據傳遞給新文件。

如果您希望用戶保存頁面，它的文件系統，這是一個不同的問題，來實現這一目標的最佳途徑，將是，通知用戶/問他保存頁面，該頁面可以是你的新窗口，就像你在做w.open()。

讓我爲你做了一些示範：

//assuming you know jquery or are willing to use it :) 
    var html = $("#tblive").html().replace(/</g, '&lt;'); 

    //generating your download button 
    $.post('generate_page.php', { content: html }) 
     .done(function(data) { 
      var filename = data; 

      //inject some html to allow user to navigate to the new page (example) 
      $('#tblive').parent().append(
       '<a href="'+filename+'">Check your Dynamic Page!</a>'); 

      // you data here, is the response from the server so you can return 
      // your new dynamic page file name here. 
      // and maybe to some window.location="new page"; 
     });

在服務器端，這樣的事情：

<?php 
    if($_REQUEST["content"]){ 
     $pagename = uniqid("page_", true) . '.html'; 
     file_put_contents($pagename, $_REQUEST["content"]); 
     echo $pagename; 
    } 
?>

的一些注意事項，我沒有測試過的例子，但它的工作原理理論。我認爲用這個實現它的努力應該是最小的，假設這解決了你的問題。

來源

2014-01-08 00:56:47

的Javascript *有限制。 – Joe

這都是本地的，就像在我的硬盤上運行一樣。我沒有在Windows中設置和運行任何類型的服務器環境，只是在Firefox中打開一個普通的舊HTML文件。我知道JavaScript通常受限於這種方式導出文件，但我想也許因爲客戶端和服務器基本上是一個在這種情況下，我可能有一個機會。該解決方案並不一定是基於JavaScript的，但如果可能的話，我希望它能在這個本地HTML文件中運行。 – LukeLC

限制是由您的瀏覽器和所有主流瀏覽器強加的。儘管聽起來很愚蠢，但它是有限的，並沒有任何可能的工作，除非你開始處理升級的特權調整來修改Firefox的用戶設置......但我非常不鼓勵你這樣做，在那裏，做到了，不要不行，不容易或不好。 –

你不能做到這一點與JavaScript，但你可以有一個HTML5鏈接，打開保存對話：

<a href="pageToDownload.html" download>Download</a>

您可以添加一些智慧給它的POST後的處理頁面上自動化。

小提琴：http://jsfiddle.net/ghQ9M/

來源

2014-01-08 00:58:01 Pogrindis

什麼是downvote的原因？ – Pogrindis

-1

基於服務器的解決方案：

你需要建立一個服務器（或您的PC）與頭，告訴你的瀏覽器下載頁面，而不是服務於你的HTML頁面處理HTML標記。如果您想在本地計算機上執行此操作，則可以使用軟件，如WAMP（或Mac的MAMP或Linux的LAMP），它基本上是一個.exe中的Web服務器。這很麻煩，但它會工作。

來源

2014-01-08 01:03:48 Jared

如何本地保存由JavaScript生成的.html文件（運行在* local * .html頁面上）？

回答

如何*本地*保存由JavaScript生成的.html文件（運行在* local * .html頁面上）？

回答

相關問題

如何本地保存由JavaScript生成的.html文件（運行在* local * .html頁面上）？