如何提交保留HTML的表单？解决提交前 被剥离问题

云原生阿岚

2026-5-20

这个问题我之前也碰到过，咱们一步步拆解原因和解决办法：

问题根源

浏览器对表单元素的value属性有默认的HTML实体解码行为——当你把包含 的HTML内容放进隐藏input时，浏览器会自动把这个实体转换成普通的非换行空格字符（也就是Unicode的\u00A0），而不是保留 这个字符串本身。如果你的PDF生成器只识别 实体字符串，而不是实际的空格字符，就会出现「被剥离」的错觉；另外如果是通过JavaScript动态赋值，JS的字符串处理也可能提前解析了实体，导致提交前就看不到 了。

解决方法

这里有几个靠谱的方案，你可以根据实际情况选择：

双重转义实体字符
把HTML里的 替换成&nbsp;，这样浏览器解码后得到的就是 字符串，而不是空格。比如你原本的内容是<p>Hello World</p>，改成<p>Hello&nbsp;World</p>再放进input的value里，提交后后端拿到的就是带 的内容了。

用JavaScript手动转义实体
如果是动态生成内容，写个简单的转义函数处理实体：

function escapeHtml(str) {
  return str.replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}
// 赋值给隐藏input
document.getElementById('your-hidden-input').value = escapeHtml(yourOriginalHtml);

这样所有的&都会被转成&，包括 里的&，提交后就能保留 实体。

直接使用Unicode非换行空格
如果你不需要严格保留 字符串，只是需要PDF里显示非换行空格，可以把所有 替换成Unicode字符\u00A0。比如：
```
const processedHtml = yourOriginalHtml.replace(/&nbsp;/g, '\u00A0');
document.getElementById('your-hidden-input').value = processedHtml;
```
这种方式下，浏览器和PDF生成器都会识别这个字符为非换行空格，效果和 一致，还避免了实体解析的问题。

调试小技巧

你可以在设置input值之后，用console.log(document.getElementById('your-input').value)打印一下，看看值里的 是不是已经变成空格了——如果是，就说明是实体被提前解码了，用上面的转义方法就能解决。

内容的提问来源于stack exchange，提问作者bnjmn.myers

如何提交保留HTML的表单？解决提交前&nbsp;被剥离问题

如何提交保留HTML的表单？解决提交前被剥离问题