使用包含在页面中的 pdf 打印 CSS答案

【问题标题】：Print CSS with pdf included in page使用包含在页面中的 pdf 打印 CSS
【发布时间】：2013-08-13 18:57:30
【问题描述】：

我有一个页面，其中有很多关于某个项目的信息，下面有一个小的“下载规范 pdf”按钮。单击它会单独打开 pdf，这就是我需要的 web 版本。

但是，我目前正在处理我的打印 css，我的目标是在此处创建一个打印 css，显示信息及其下方的 pdf，包含在同一个打印文件中。

是否可以在我的页面中嵌入 pdf（仅用于打印 css）？我尝试使用 <object> 或 embed 标签，但这似乎根本没有出现在我的打印 css 中。

更新：我设法使用 iframe 显示 pdf，但我无法将 iframe 高度设置为 pdf 的高度。 pdf 是动态的，所以它不是一个设定的高度。事实证明，通过 jQuery 动态更新高度是不可能的，因为 iframe 中的文件下载不会触发 onload 事件。如果有人可以帮助我找到解决方案，我将不胜感激。

提前致谢。

【问题讨论】：

您在寻找跨浏览器解决方案吗？
@Noseratio 是的，最好是。但是 atm 我什至没有让它在任何浏览器中工作。
我认为设置高度的问题不仅仅是onload事件，如果您尝试在1000毫秒的settimeout上进行设置，它会起作用吗？没有办法知道 iframe 内 pdf 的高度，无论如何它通常会反过来，你让 iframe 内容的主体触发一个加载信号来调整其包含的 iframe 的大小。唉，PDF里面没有“onload”事件……是吗？

标签： pdf print-css

【解决方案1】：

简单的解决方案是在 iframe 上强制使用 4:3 透视图，并根据您的打印页面调整大小（此处为 A4 纸张大小）。

【讨论】：

感谢您向我指出这一点并在之前的聊天中帮助我；）

【解决方案2】：

您可以使用 PDF.js 库，它是一个出色的跨浏览器工作的 JavaScript PDF 查看器。在 div 中显示 PDF，使用 display:none 将其隐藏，使用您的屏幕 CSS。

【讨论】：

【解决方案3】：

我可以给你的一个建议是，如果你知道 PDF 页面的最大数量，只需将 iframe 高度设置得足够大......这意味着，如果页面数量较少，打印机将输出空白页面.

另一个建议是上面提到的，使用一个工具来注释或更改所有 PDF 的属性以包含该信息。

我找到了这个工具：http://pdfcrowd.com/html-to-pdf-api/ 将 PDF 转换为 HTML，您可以使用它来代替显示 PDF

【讨论】：

这就是我最后采用的方法，在有人指出 iframe 中的 pdf 将自动缩放到给定静态宽度/高度的 100% 之后。这在我的情况下有效，因为 PDF 都是一页的。所以我最终以 3:4 的比例设置了宽度/高度，并成功地将其包含在打印页面中。一个简单的解决方案！
虽然它在 Chrome 和 FF 中工作，但当我在 IE 中打印时，pdf 似乎仍然没有出现，有什么线索吗？
你确定它没有被推送到第二个打印页面？
是的，因为我打印了 5 页，其中第三页应该是 pdf。它只是显示一个空白点。

【解决方案4】：

我认为您最好的选择是拥有 PDF 的解析版本以供打印。在 Illustrator 中打开它并将每个页面保存为 SVG，然后使用 SVG 文件进行打印。

【讨论】：

我有 200 多种产品，它们通过 pdf 动态导入。所以这不是一个选择。
我确信有一些工具可以动态地将 PDF 转换为 SWF。
我会调查的。
如果您的产品 PDF 是动态获取的，也许您想在生成时将该信息包含在 PDF 中？
@Ayyash 我不明白你的意思。在哪个pdf中包含哪些信息？