将页面转换为 PDF 时强制 html 元素透明

Question

我目前正在将网页转换为可以轻松打印为 pdf 的格式，同时保持相同的外观。许多打印到 pdf 的工具不允许您打印背景图像/颜色，所以我试图通过在表格的标题元素下放置一个纯色图像来解决这个问题。 现在它看起来像这样：

<img src="/image.png" width="100%" style="margin-bottom:-90px">
<table><th>Header1</th><th>Header2</th>...

当我通常使用浏览器查看标题元素时，这看起来好像标题元素具有纯色背景，但是当尝试打印到 pdf 时，<th> 元素在图像上具有空白的白色背景。有没有办法强制这些元素被视为透明的文本与图像？或者也许有更简单的方法来解决后台问题？

编辑：
所以我真正的问题是我试图解决这个问题，让尽可能多的 htmltopdf 工具可以访问该页面，最终这不是一个选择，因为它在一个浏览器或另一个浏览器和一台打印机中总是看起来不同将强制边距，而另一个则不会，等等。我对此的解决方案是我在 php 中创建了一个简单的应用程序，该应用程序使用wkhtmltopdf 打印页面，我必须先将其安装在我的服务器上。一旦完成，无论浏览器如何，pdf 看起来都不错！

Answer 1

当您“打印到 PDF”网页时，创建打印作业的首要责任在于您的浏览器。

在这种情况下，他们必须为作业创建一个 PostScript 文件。 （只有下一阶段，当虚拟“PDF 打印机”开始发挥作用时，会从 PostScript 输入创建 PDF。与 LibreOffice、OpenOffice 和 MS Office 不同，浏览器[尚未]能够直接“导出到 PDF”. 更新：显然，Chrome 会：正如 yms 在评论中解释的那样：打开打印对话框，使用打印机选择下拉列表选择“另存为 PDF”。但是，我发现默认情况下它不打印背景。）

现在你必须考虑两件事：

1. 大多数浏览器都有设置，允许“打印图像”/“不打印图像”和“打印背景颜色”/“不打印背景颜色”等等。

   所以你应该先问问自己：

   • 我的浏览器打印设置是什么？

   • 我的浏览器是否将 PostScript 移交给具有我想要的颜色的 PDF 打印机？

   如果不是，则不是 PDF 打印机的问题。

2. 关于透明度功能：PostScript 不支持透明度（只有 PDF 支持）。因此透明区域需要为 PostScript 输出“展平”（即，转换为 位图图像，试图模仿透明对象的外观）。

   但是，在这种“扁平化”方面，并非所有应用程序和浏览器都做得很好。

   只要您需要“打印到 PDF”，就没有机会在 PDF 文件中获得真正的透明度（您只会获得“mimikry”位图）。

只有在浏览器开始能够“导出为 PDF” 时，此处的透明度才会开始。或者您可以找到第三方工具，该工具可以直接将从 HTML 转换为 PDF（无需使用先转换为可打印 PostScript 的 print 中间步骤）。

Answer 2

正如@Kurt Pfeifle 所提到的，对您而言，最好的选择可能是使用无需通过打印机即可直接从 HTML 转换为 PDF 的工具。您可以尝试以下 2 个免费组件：

• wkhtmltopdf 命令行应用程序。
• Amyuni webkitpdf 带有 C# 和 C++ 绑定的 Windows 库。

Answer 3

我在 Google Chrome 中找到了一个解决方案，它适用于 Windows 10 / Google Chrome 版本 86.0.4240.111。

打印前直接到页尾！现在，按 Ctrl+P 并从目的地选择“另存为 pdf”。您将获得具有透明度的 PDF！

如果在打印前没有走到html-page的末尾，就没有透明度！