如何使动态或生成的 HTML 页面可保存？
Posted
技术标签:
【中文标题】如何使动态或生成的 HTML 页面可保存？【英文标题】：How make a dynamic or generated HTML page savable? 【发布时间】：2012-01-09 17:59:10 【问题描述】：我对 dojo、javascript 和 html 编码还是有点陌生。我继承了使用 dojo 1.4.2（将来会升级）和 javascript 编码的 HTML 页面的所有权。本质上，HTML 页面包含一个最初显示给用户的表单。用户填写表单并提交后，表单将替换为根据他们的回答生成的内容。
这是通过使用表单中的答案来显示或隐藏 HTML 文件中已包含的各种 div 元素来完成的。因此表单被隐藏，而其他 div 元素的一些子集被显示出来。
我们希望用户可以将这个生成的页面保存为静态 HTML 页面。所以本质上我们只想将显示的 div 保存到文件中，而不是整个页面。目前，保存只是保存一个本地副本，这需要用户在每个视图上重新提交表单。
有人告诉我，这可以通过将数据传递给一个服务（可能是一个 JSP）来完成，该服务将处理这个问题并将其传回浏览器。但是，我对此并不熟悉，也找不到任何示例。有没有办法做到这一点，有没有人可以指出任何示例或文档？
理想情况下，我想插入一个保存按钮，用于保存在浏览器中查看的生成内容，而无需实际创建将保留在服务器上的静态 HTML。
提前致谢。
【问题讨论】：
内容是否仅在表单元素（输入）中，或者您是否也在更新 DIV/SPAN（其他 HTML 元素）？ 表单元素最初位于 HTML 的顶部，但一旦您单击提交按钮。显示的“生成”内容只不过是 HTML 页面底部的 DIV/SPAN 等，通过更新样式显示出来。 【参考方案1】：这样的bookmarklet 怎么样？
javascript:document.location='data:text/html,'+document.all[0].innerHTML;
它的工作原理是访问当前 DOM 的 HTML 表示，然后重定向到一个 新页面，该页面是使用 Data URI scheme 从 HTML 标记构建的。
使用浏览器的常规保存菜单项可以轻松保存新页面。请注意，相对 URL 将无法在此转换中保留下来，因此保存的页面可能会丢失其样式表/脚本/图像引用。
【讨论】：
【参考方案2】：您可以引入一种机制，根据 URL 参数（即解析的查询字符串的内容）对页面进行更改。
即给定一个包含查询部分的 URL（例如 http://your.site.com/path/to/page?p1=true&p2=true），Elements 映射到 p1 或 p2 会显示；其他人不会。
【讨论】：
鉴于我的经验和时间框架，我不太可能走这条路，但感谢您的意见。 由于使用其他工具的限制，我们最终走上了这条路。我们还将 HTML 页面转换为 JSP 以使事情变得更容易。这种组合使我们能够保存静态副本。【参考方案3】：您可以使用 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 个垂直布局的状态的精灵）：
如果一切正常，单击按钮应提示用户下载页面当前状态的副本。
【讨论】：
谢谢。这周我会先看看并尝试一下，然后再标记一个适合我的解决方案。【参考方案4】：使用 jQuery 之类的东西，很容易获取所有呈现的 HTML 内容：
$(document).ready(function()
var rendered = $('html').html(); // store this in some variable
);
由于浏览器的安全限制，浏览器无法访问本地文件系统，存在要保存页面的问题。
如果使用 ActiveX 或 execCommand (http://4umi.com/web/javascript/filewrite.php)，Internet Explorer 可能是个例外。否则，您将不得不使用 GGG 指出的一些第三方工具/插件（如 Flash）。
【讨论】：
谢谢。因此，如果我理解正确，我可以获得渲染的内容，但问题仍然是允许用户根据浏览器在本地保存，这可能只能通过使用一些额外的工具/插件来解决？ 没错。要成为跨浏览器，出于安全原因，您必须使用附加插件（如 Flash）。想象一下，如果您从 Google 列表中浏览了一个网站，并且它能够写入[/读取]到[/从]您的硬盘驱动器。它可以获取您的机密信息，或轻松传播病毒，您只需查看网页即可。那将是有史以来最不安全的事情。以上是关于如何使动态或生成的 HTML 页面可保存？的主要内容，如果未能解决你的问题，请参考以下文章
自动把动态的jsp页面（或静态html）生成PDF文档，并且上传至服务器
js在一个div后面使用after方法动态生成的输入框怎样在页面关闭时保存下来？