将PDF缩放以适应iFrame

Question

我需要将PDF文件按比例缩放以适应iFrame。它需要具有响应性，这样PDF应该会随着设备的宽度而缩放，以便PDF文档显示完整的页面。

如果有免费的插件或Bootstrap中的功能可以实现此目的，我很乐意听到相关信息。

提前感谢！

- Luuxter

---

请包含您已经编写的代码。提供的细节越多，您可能会收到更多答案。请查看FAQ和如何提问。 - Roald Nefs

这个回答解决了你的问题吗？自适应缩放：嵌入HTML的PDF - Klesun

Answer 1

如果您想知道如何调整PDF大小以适应Iframe，请参考以下代码：

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

通过添加#zoom=50，它将默认在iframe中显示缩放的PDF。(这可以编辑为任何您想要的数字)

- user7582130

---

所有选项 - Klesun

你的代码使用文件名来加载PDF。如果我想从对象数据URL加载PDF，然后调整大小怎么办？ - Srk95

这在Chrome中可以工作，并且与使用URL.createObjectUrl(blob)创建的Blob一起使用。即URL.createObjectURL(blob) + '#zoom=FitW'（FitW适合我的特定需求，我从下面kuz1toro的答案中得到了它）。 - Jarrod Juleff

Answer 2

在 Firefox 中，对我而言它是这样工作的，不过在其他浏览器上未经过测试。

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

- kuz1toro

---

根据我的需求，我将FitH替换为FitW。在Chrome上操作。同时，我也将其附加到了通过URL.createObjectURL(blob)引用的blob的末尾。URL.createObjectURL(blob) + '#zoom=FitW' - Jarrod Juleff

Answer 3

你可能无法保证其一致性。你可以让iFrame中的PDF阅读器具有响应式，但是每个阅读器在显示PDF时的行为都不同，如果没有设置初始视图，则每个PDF文件所使用的默认缩放和页面模式也会不同。

如果你可以掌控PDF文件，最好设置初始视图。但即使如此，仍需要考虑浏览器中内置的不同阅读器以及浏览器插件来确定如何解释该初始视图。

- joelgeraci

---

我在这里回答了这个问题：https://dev59.com/yHbZa4cB1Zd3GeqPCy6E#71951975它需要创建一个iframe，所以可能不是理想的解决方案，但我的解决方案提供了一些可重用的代码，我在我的网站上使用。希望对你有帮助！ - Realto619