Zoom to fit: 在HTML中嵌入PDF文件时的缩放适应问题

Question

我正在将一个本地的pdf文件嵌入到一个简单的网页中，并希望将初始缩放设置为适合对象尺寸。这是我尝试过的代码，但它没有影响到缩放。

 <embed src="filename.pdf?zoom=50" width="575" height="500">

有没有人知道如何修改代码，使其初始缩放比例适合对象大小。

- user3024833

---

这个怎么样？（https://dev59.com/7WQn5IYBdhLWcg3w7KrS） - Irgendw Pointer

我现在代码中使用的修饰符没有影响 PDF 文件的缩放，我需要找出如何使缩放适应对象的初始状态。 - user3024833

Answer 1

回复有些晚了，但我注意到这个信息很难找到，在SO上也没有找到答案，所以在这里给出。

尝试使用不同的参数#view=FitH来强制使其适应水平空间，并且您需要以#而不是&开头启动查询字符串：

filename.pdf#view=FitH

我注意到的是，如果Adobe Reader嵌入浏览器中，这将起作用，但Chrome将使用自己的阅读器版本，并且不会以相同的方式响应。在我的情况下，Chrome浏览器默认缩放以适应宽度，因此没有问题，但Internet Explorer需要使用上述参数来确保链接始终以正确的视图设置打开PDF页面。

有关可用参数的完整列表，请参见此文档

编辑:（懒人模式开启）

- Rich

---

好的，当我调整浏览器窗口大小时，如何强制使页面重新适配 FitH？ - Vishal

URL中提及的参数文档已移至此链接 https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf。 - RominNoodleSamurai

为什么你不是被选中的答案？ - Martin Eckleben

我无法让它在Edge中工作。浏览器忽略了这些参数。Chrome至少支持其中的一些（例如视图、缩放、页面）。 - Josef Bláha

我使用Wayback machine找到了一个包含完整列表的旧链接：https://web.archive.org/web/20140610174148/https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf - AuRise

Answer 2

对我来说这个方法有效（因为我的PDF容器太小，需要放大）：

    <embed src="filename.pdf#page=1&zoom=300" width="575" height="500">

- nazbouy

---

#zoom=50 或 #page=2&zoom=300 在 Chrome 和 IE 中都能完美地工作。IE 似乎只对 #view=Fit 做出响应。更多 IE 参数请参见此处：http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf。 - Sergiu Z

我有一个多页的PDF文件，#zoom=100对我有效。 - adrianp

Answer 3

这个方法使用了“object”，也有“embed”。任何一种方法都可以：

<div id="pdf">
    <object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
    <!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
    </embed> -->
    <p>System Error - This PDF cannot be displayed, please contact IT.</p>
    </object>
</div>

- SR Harvey

---

从文档对象或嵌入式中不支持百分比。 - Junius L

Answer 4

在参考了@Rich的答案后，我在我的代码中使用了view=FitH来查看以Angular为基础的PDF内容（如下所示）。

我分享给那些关心如何使用Angular框架查看带有object标签的base64内容PDF文件的人。

查看PDF的选项

this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

从API中读取PDF内容

let content = DataHelper.getDataFromAPI();

当点击“显示内容”按钮时使用。

showData() {
    let content = DataHelper.getDataFromAPI();

    this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

    this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
  }

在HTML文件中使用object标签，如下所示：

<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>

链接Angular演示https://stackblitz.com/edit/angular-ivy-tdmieb

- Hien Nguyen

Answer 5

万一有人需要，在我的火狐浏览器上，它是这样工作的。

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

- kuz1toro

Answer 6

回答有点晚，但我有一些补充，可能对其他人有用。

如果您使用iFrame并将pdf文件路径设置为src，则会以100％缩小加载，这相当于FitH。

- raf

---

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

Answer 7

这对我很好用

<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />

- Jimut123

Answer 8

使用iframe标签显示具有缩放适应功能的PDF文件。

<iframe src="filename.pdf" width="" height="" border="0"></iframe>

- anilglpl