DEV Community
·
使用 Shadow DOM 内嵌完整 HTML 文档
原文英文，约200词，阅读约需1分钟。
📝
内容提要
使用ColdFusion/CFML生成HTML文档，使用jsoup和WKHTMLTOPDF生成PDF。如果将生成的HTML内容直接输出到现有网页上，网页将变得无效，全局CSS样式会污染预览。为了正确查看最终结果，需要在新标签页中独立查看HTML文档，或者嵌入到iFrame中。另一种方法是使用浏览器的shadow DOM，可以更准确地渲染PDF和电子邮件预览。
🎯
关键要点
-
使用ColdFusion/CFML生成有效的HTML文档以生成PDF。
-
直接将生成的HTML内容输出到现有网页会导致网页无效，全球CSS样式会污染预览。
-
为了正确查看最终结果，需要在新标签页中独立查看HTML文档或嵌入到iFrame中。
-
使用浏览器的shadow DOM可以更准确地渲染PDF和电子邮件预览。
-
shadow DOM生成独立的DOM并填充现有网页中的内容，以便更忠实地渲染。
❓
延伸问答
如何使用ColdFusion生成HTML文档以生成PDF？
使用ColdFusion/CFML可以生成有效的HTML文档，然后利用jsoup和WKHTMLTOPDF进行PDF生成。
为什么直接将HTML内容输出到现有网页会导致网页无效？
直接输出会导致双DOCTYPE问题，使网页无效，同时全球CSS样式会污染预览。
如何正确查看生成的HTML文档？
可以在新标签页中独立查看HTML文档，或将其嵌入到iFrame中。
什么是shadow DOM，它如何帮助渲染PDF和电子邮件预览？
shadow DOM生成独立的DOM并填充现有网页中的内容，从而更忠实地渲染PDF和电子邮件预览。
使用shadow DOM渲染PDF有什么优势？
使用shadow DOM可以更准确地渲染内容，避免与现有网页的样式冲突。
在生成PDF时，如何避免样式污染？
可以使用shadow DOM或在新标签页中查看HTML文档，以避免样式污染。
🏷️
