缩放 PDF 以适合 iFrame [关闭]答案

【问题标题】：Scale PDF to fit iFrame [closed]缩放 PDF 以适合 iFrame [关闭]
【发布时间】：2017-07-08 16:57:31
【问题描述】：

我需要缩放 PDF 文件以适应 iFrame。它需要响应式，因此 PDF 应随设备宽度缩放，以便 PDF 文档显示完整的页面。

如果 Bootstrap 中有免费插件或功能可以实现这一点，我会很高兴听到。

提前致谢！

【问题讨论】：

【解决方案1】：

如果您询问如何调整 PDF 的大小以适合 Iframe。

以下代码可能会有所帮助：

<iframe src="name.pdf#zoom=50" height="100%" width="100%"></iframe>

通过添加#zoom=50，它将默认显示 PDF 并在 iframe 中放大。（这可以编辑成任何你想要的数字）

【讨论】：

All Options
您的代码使用文件名来加载 pdf。如果我想从对象数据 url 加载一个 pdf，然后调整它的大小怎么办？
这适用于 chrome 以及使用 URL.createObjectUrl(blob) 制作的 blob。即 URL.createObjectURL(blob) + '#zoom=FitW' （FitW 以适合我的特定需求的宽度，我从下面的 kuz1toro 的回答中得到）。

【解决方案2】：

在 Firefox 中对我来说它是这样工作的，但不要在其他设备上测试它

<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>

【讨论】：

将 FitH 换成 FitW 以满足我的需求。在 Chrome 上。也将其附加到使用 URL.createObjectURL(blob) 引用的 blob 的末尾。 URL.createObjectURL(blob) + '#zoom=FitW'

【解决方案3】：

您可能无法以任何程度的一致性来实现这一点。您将能够使 iFrame 中的 PDF 查看器 具有响应性，但如果未设置初始视图，则每个查看器在显示 PDF 时的行为会有所不同...和每个设置了初始视图的 PDF 可能有不同的默认缩放和页面模式。

如果您可以控制 PDF 文件，那么设置初始视图是值得的，但即便如此，您仍然需要依靠浏览器和浏览器插件中内置的不同查看器来确定初始视图的效果解释。

【讨论】：