在现代Web应用中，用户经常需要填写各种表单。有时，为了备份、离线查看或进一步处理，用户可能希望将当前页面（包括已填充的表单数据）保存为一个HTML文件。然而，直接使用document.documentElement.outerHTML来获取页面内容并进行下载，往往会遇到一个问题：表单输入框中用户输入的值不会被保存，下载的HTML文件中的表单字段依然是空的。这是因为outerHTML反映的是DOM元素的原始特性（attribute），而不是其当前的属性（property）值，尤其对于input元素的value属性，用户输入后的值仅存在于JavaScript的value属性中，而不会自动更新到HTML的value特性上。
理解问题：表单值的动态性
当用户在HTML表单的元素中输入文本时，input元素的value 属性（property）会动态更新。例如，document.getElementById('myInput').value会返回用户当前输入的内容。然而，如果检查该元素的outerHTML或innerHTML，你会发现其value 特性（attribute）可能仍然是初始值（或空）。这是因为DOM属性和HTML特性之间存在差异：特性是HTML标签中定义的键值对，而属性是JavaScript对象上的键值对。对于某些特性，如value，它们是“反射”的，但用户输入并不会自动更新HTML特性。因此，要下载包含当前表单值的HTML，我们需要手动将当前属性值同步回特性。
解决方案核心：同步DOM属性与特性
解决这个问题的关键在于，在生成用于下载的HTML字符串之前，遍历页面上的所有表单输入元素，并将其当前的value属性值显式地设置回其value特性。这样，当我们获取DOM元素的innerHTML或outerHTML时，它将包含最新的、用户填充的表单值。
实现步骤与代码示例
以下是实现这一功能的具体步骤和相应的JavaScript及HTML代码。
立即学习“Java免费学习笔记（深入）”；
HTML结构示例
我们首先定义一个包含表单字段的HTML容器，以及一个触发下载的按钮。
下载带填充表单的页面
下载包含已填充表单的HTML
JavaScript实现解析
上述downloadPage函数是实现核心：
艺帆集团公司企业网站源码基于艺帆企业cms制作，全站div+css 制作；它包含了单页设置、单页分类设置、新闻、产品、下载、在线招聘、在线留言、幻灯管理、友情链接管理和数据库备份等功能。 DIV+CSS布局优势一.精简代码，减少重构难度。网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦
- 获取所有输入框元素: document.getElementsByTagName('input') 会返回页面上所有元素的HTMLCollection。
-
同步value属性到value特性:
for (var i = 0; i < inputs.length; i++) { inputs[i].setAttribute("value", inputs[i].value); }这一步是关键。inputs[i].value获取的是用户在输入框中当前实际输入的值（属性）。inputs[i].setAttribute("value", ...)则将这个值写回到HTML元素的value特性中。这样，当后续获取HTML字符串时，value特性就会包含最新的数据。
-
获取要下载的HTML内容:
var htmlContent = document.getElementById("container").innerHTML;这里我们选择下载id="container"元素的内部HTML。如果需要下载整个页面的HTML，包括html>,
, 等标签，可以使用document.documentElement.outerHTML。但请注意，如果下载整个页面，需要确保所有脚本和样式都已内联或正确引用，否则下载的HTML文件可能无法完全复现原始页面的功能和样式。 -
创建临时下载链接:
var hiddenElement = document.createElement('a');创建一个不可见的元素是触发文件下载的常用技巧。
-
设置下载链接和文件名:
hiddenElement.href = 'data:text/html;charset=UTF-8,' + encodeURIComponent(htmlContent); hiddenElement.download = 'myFilledFormPage.html';
- data:text/html;charset=UTF-8,：这是一个data URI，它允许我们将文件内容直接嵌入到URL中。text/html指定了文件类型，charset=UTF-8指定了编码。
- encodeURIComponent(htmlContent)：对HTML内容进行URI编码是至关重要的。这可以确保HTML内容中的特殊字符（如, &, #等）不会破坏data URI的结构，从而避免下载失败或内容损坏。encodeURIComponent比encodeURI更彻底，因为它还会编码URI组件分隔符（如/, ?, &等），对于任意数据内容来说更安全。
- hiddenElement.download：HTML5的download属性会提示浏览器下载文件，并指定默认的文件名。
-
模拟点击下载:
document.body.appendChild(hiddenElement); hiddenElement.click(); document.body.removeChild(hiddenElement);
通过将临时元素添加到DOM中（某些浏览器需要此步骤才能触发click()事件），然后调用其click()方法，即可模拟用户点击下载链接。下载完成后，为了保持DOM的整洁，应移除该临时元素。
关键考量与最佳实践
- 编码的重要性: 始终使用encodeURIComponent()对要下载的内容进行编码，以避免潜在的字符问题。
- 下载范围: 根据需求选择下载页面的特定部分（如container.innerHTML）还是整个页面（document.documentElement.outerHTML）。如果下载整个页面，请注意样式和脚本的引用问题。
- 样式与脚本: 如果下载的HTML文件需要在离线状态下完全正常工作，请确保所有CSS样式和JavaScript代码都已内联到HTML文件中，或者其引用路径在离线环境中仍然有效。否则，下载的页面可能显示不正确或功能缺失。
- 安全性: data URI下载功能允许用户将任意内容保存为文件。在设计此类功能时，应考虑潜在的安全风险，例如用户可能下载包含恶意脚本的文件。对于用户生成的内容，务必进行适当的清理和验证。
- 用户体验: 提供明确的下载按钮和反馈，让用户知道操作已成功。
总结
通过上述方法，我们能够有效地解决JavaScript下载包含已填充表单的HTML页面时，表单值丢失的问题。核心在于理解DOM属性与HTML特性之间的区别，并在下载前手动同步input元素的value属性到其value特性。这种技术在需要用户保存其当前工作状态或导出数据时非常有用，为用户提供了更完整和持久化的交互体验。
