如何重现

Question

当我从基于 Chromium 的浏览器生成 PDF 并在 Firefox 中显示它时，所有阴影都会消失。

尽管如此，如果我在 chrome 中观看该 PDF，或者在 Firefox 中生成该 PDF，那么阴影都会被正确呈现。

如何重现

1. 浏览至https://example.com在 chrome 中。请注意，它有一个非常微妙的盒子阴影。
2. 打印 => 另存为 PDF 为chrome-generated.pdf
3. 在 Chrome 和 Firefox 中打开 Chrome 生成的 PDF 文件并查看结果。
4. 重复使用 Firefox 浏览并从 Firefox 本身生成 PDFfirefox-generated.pdf
5. 在 Firefox 中打开 Firefox 生成的 PDF 文件并查看结果。

结果

• 原始网站如下所示
• 盒子下面有非常柔和的阴影

Answer 1

我不知道为什么它看起来这么糟糕，但可以提供一些有关如何构建和呈现 PDF 的细节。

首先，Mozilla 浏览器（如 Firefox）使用的是传统 PDF 查看器的 PDF.js 模拟。此外，它们在文档中明确指出，渲染可能会存在差异。

当使用 SKIA 等 PDF 编写器直接写入具有透明度（如 example.com 页面）的图像时，图像将作为 2 个独立对象添加。一个是颜色数据，另一个是“Softmask”，即 Alpha 不透明度（0.0 - 1.0，而不是透明度），但单独来看，图像通常看起来像是“全黑”，请参见右上角详细信息中的“黑色不透明度”定义。此处黑色定义为非常低的 1.96%。

事实上，它太低了，以至于在某些观看者看来，在白色或灰色背景下可能很难看清任何东西。

这对 Firefox 模拟有何影响？它会构建一个全页 PNG 背景图像，但没有任何单独的 alpha 组件（这些组件用于不可见的文本层和附加注释层）。它看起来像三色 JPG，但作为数据 blob 却是 PNG。

这是 Alpha 通道（看不出任何差异，它是纯单色，即白色）而 RGB 通道都是相似的色调，产生三层灰色。

并且由于某些尚不清楚的原因，通过添加更灰的色调渲染进行了过度补偿！也许是读取该组值时出现错误。

因此，有时“PDF.js 图像预览”是不真实的，但云中的真实 PDF 仍然是带有 Alpha 的源 PDF！

后期编辑

出于兴趣，我尝试了相反的方法，因此使用 Firefox“另存为 PDF”，结果自然不同，因为它使用Cairo[graphics] 1.17.4 （而不是 SKIA）来编写 PDF，因此包括图像在内的内容也不相同。

最明显的是，单一色调区域被转换成了 4 个！面具，然而，虽然它们是预期的“黑色”（完全透明的 Alpha 层），但它们是 100% 黑色，因此根本没有真正的灰色。

因此，Web 浏览器将 HTML 转换为 PDF 时通常会生成不同的 PDF。但是，某些 HTML 对象（如“字体”）更容易转换为 PDF 对象，而其他带有“Alpha”层的 HTML 对象则不容易转换为 PDF 对象。