缩放以适应：嵌入在 HTML 中的 PDF

Posted 2023-02-24

【中文标题】缩放以适应：嵌入在 HTML 中的 PDF

【英文标题】：Zoom to fit: PDF Embedded in HTML

【发布时间】：2013-12-31 23:42:57

【问题描述】：

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

 <embed src="filename.pdf?zoom=50"  >

有谁知道如何修改代码，使其初始缩放设置为适合对象大小。

【问题讨论】：

this 呢？

我现在在代码中的修饰符不会影响 pdf 文件的缩放，我需要弄清楚如何使缩放最初适合对象

【参考方案1】：

按照 @Rich 回答，我在代码中使用 view=FitH 在 Angular 中查看 PDF 内容 base64，如下所示。

我为谁分享了使用 Angular 框架查看带有对象标签的 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 #pdfview
[data]=''
type="application/pdf"


>
</object>

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

【参考方案2】：

这对我来说很好用

<embed src=".file-name.pdf#zoom=FitH"   />

【参考方案3】：

以防万一有人需要它，在我的 Firefox 中它是这样工作的

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

【参考方案4】：

回复有点晚，但我注意到此信息可能很难找到，并且在 SO 上找不到答案，所以在这里。

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

filename.pdf#view=FitH

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

有关可用参数的完整列表，请参阅doc

编辑：（开启懒惰模式）

【讨论】：

这很棒。当我调整浏览器窗口大小时，如何强制它将页面重新调整为FitH？

上面提到的URL中参数的文档已经移到这个链接adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/…

为什么你不是投票答案:) 非常感谢！

有没有办法改变 元素的背景容器的颜色？我在文档外部但在元素内部看到灰色。我希望它是透明的或从元素继承。

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

【参考方案5】：

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

<div id="pdf">
    <object id="pdf_content"   type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
    <!-- <embed src="Assembly.pdf"   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>

【参考方案6】：

对我来说这很有效（我想放大，因为我的 pdf 的容器很小）：

    <embed src="filename.pdf#page=1&zoom=300"  >

【讨论】：

#zoom=50 或 #page=2&zoom=300 在 chrome 和 IE 中都能完美运行。 IE 似乎只响应#view=Fit。更多 IE 参数在这里：partners.adobe.com/public/developer/en/acrobat/…

我有一个多页 PDF，#zoom=100 为我工作。

【参考方案7】：

使用 iframe 标签显示 pdf 文件以适合缩放

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

【参考方案8】：

对这个问题的回复有点晚，但是我确实有一些东西要补充，可能对其他人有用。

如果你使用 iFrame 并将 pdf 文件路径设置为 src，它将加载缩小到 100%，这相当于 FitH