如何使動態或生成的HTML頁面可以保存？

我對dojo，javascript和HTML編碼還是有點新的。我繼承了使用dojo 1.4.2編碼的HTML頁面（將來會升級）和javascript。本質上，HTML頁面包含最初顯示給用戶的表單。用戶填寫完表單並提交後，表單會根據他們的回答替換爲生成的內容。如何使動態或生成的HTML頁面可以保存？

這是通過使用表單中的答案來顯示或隱藏已包含在HTML文件中的各種div元素來完成的。所以表單是隱藏的，其他div元素的一些子集被顯示。

我們希望這個生成的頁面可以被用戶保存爲靜態HTML頁面。所以基本上我們只想將顯示的div保存到文件而不是整個頁面。目前，保存只保存本地副本，這需要用戶在每個視圖上重新提交表單。

我被告知這可以通過將數據傳遞給服務（可能是JSP）來完成，該服務可以處理這個並傳遞迴瀏覽器。不過，我對此並不熟悉，也找不到任何例子。有沒有辦法做到這一點，是否有人有我可以指出的任何例子或文件？

理想情況下，我想要插入一個保存按鈕，該按鈕用於保存在瀏覽器中查看的生成內容，而不實際創建靜態HTML，並保留在服務器上。

在此先感謝。

來源

2012-01-09 piperp

是僅在表單元素（輸入）中的內容，還是您正在更新DIV/SPAN（其他HTML元素）？ – vol7ron 2012-01-09 19:40:20

最初在HTML頂部有一些表單元素，但是一旦你點擊了提交按鈕。顯示的「生成」內容只不過是DIV/SPAN等，在HTML頁面的底部通過更新樣式顯示。 – piperp 2012-01-09 20:46:56

您可以引入一種機制，根據URL參數（即解析的查詢字符串的內容）更改頁面。

I.e.給定包含查詢部分的URL（例如http://your.site.com/path/to/page?p1=true & P2 =真）的Element小號映射到P1或P2將顯示;別人不會。

來源

2012-01-09 18:39:28 FK82

鑑於我的經驗和時間表，我不太可能低頭走這條路，但感謝您的意見。 – piperp 2012-01-09 20:54:51

由於使用其他工具的限制，我們最終走上了這條道路。我們還將HTML頁面轉換爲JSP以簡化操作。該組合使我們能夠保存靜態副本。 – piperp 2012-01-29 16:02:02

好聽！做得好。 – FK82 2012-02-02 22:20:18

您可以使用Flash插件下載動態創建的數據。我寫了一個小技巧here。

這是腳本的an example。

只要將這三樣東西放在dist之內，無論您的其他JavaScript文件在哪裏。頭部包括swfobject.js和bhd.js腳本。包括在身體某些HTML這樣的：<div id="dl_button"></div>

在頁面加載，運行腳本是這樣的：

var dlBtn = new BHD.Button({ 
    // id of the element to replace with this button (required) 
    id:'dl_button', 
    // button image 
    sprite:'buttons.png' 
},function(){ 
    // set default filename 
    dlBtn.setFile('untitled.html'); 
    // set file contents 
    dlBtn.setData('<html>' + document.documentElement.innerHTML + '</html>'); 
});

你「buttons.png」需要看起來像這樣（有3個狀態奠定一個精靈出垂直）：

button sprite

如果一切都做得正確，點擊該按鈕應提示用戶下載網頁的當前狀態的副本。

來源

2012-01-09 18:50:46

謝謝。我會在本週嘗試一下，然後再製定適用於我的解決方案。 – piperp 2012-01-09 20:53:18

使用類似jQuery的，它是簡單的讓所有的渲染HTML內容：

$(document).ready(function(){ 
    var rendered = $('html').html(); // store this in some variable 
});

要保存網頁，不能在JavaScript中那麼容易做，因爲瀏覽器的安全性問題的存在限制，阻止瀏覽器訪問本地文件系統。

如果使用ActiveX或execCommand（http://4umi.com/web/javascript/filewrite.php），Internet Explorer可能是個例外。否則，你必須使用一些第三方工具/插件（如Flash），正如GGG指出的那樣。

來源

2012-01-09 20:05:14 vol7ron

謝謝。因此，如果我理解正確，我可以獲取呈現的內容，但問題仍然會允許用戶根據瀏覽器進行本地保存，而這可能只能通過使用其他工具/插件來解決。 – piperp 2012-01-09 20:52:40

正是。爲了跨瀏覽器，出於安全原因，您必須使用額外的插件（如Flash）。試想一下，如果您從Google列表中瀏覽某個網站，並且可以將[/讀]寫入[/從]硬盤驅動器。它可能會帶上您的機密信息，或者輕易傳播病毒，而您除了瀏覽網頁之外不做其他任何事情。那將是最不安全的事情。 – vol7ron 2012-01-09 21:09:02

bookmarklet怎麼樣？

javascript:document.location='data:text/html,'+document.all[0].innerHTML;

它可以通過訪問當前的DOM的HTML表示，然後重定向到一個新頁這是一個從使用Data URI scheme HTML標記建立。

使用瀏覽器的常規保存菜單項可以輕鬆保存新頁面。請注意，相對URL無法在此轉換中存活，因此保存的頁面可能會丟失樣式表/腳本/圖像引用。

來源

2012-04-25 19:15:36 lukecyca

如何使動態或生成的HTML頁面可以保存？

回答

相關問題