使用全屏选项嵌入 PDF

Question

有什么方法可以将全屏选项添加到使用 iframe 嵌入的 PDF 中吗？

<iframe src="http://www.web.com/test.pdf"></iframe>

Answer 1

除非更换浏览器的默认查看器，否则您无法可靠地控制 PDF 体验。它们的行为都略有不同。但是，新的免费 Adobe DC View SDK 是客户端 JavaScript PDF 查看器，可让您在 HTML 页面中嵌入 PDF，并且它具有全屏选项。通过使用此查看器，PDF 将在所有浏览器中表现一致并具有一致的 UI。

代码看起来像这样...

<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
    var adobeDCView = 
        new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
      metaData:{fileName: "Bodea Brochure.pdf"}
    }, {embedMode: "SIZED_CONTAINER"});
  });
</script>

您可以在这里获取clientID。 https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html

Answer 2

Adobe DC View SDK 由于某种原因不断抛出错误。所以我尝试了 Mozilla’s PDF.js 并且似乎工作得很好，即使在移动设备上也是如此。

使用全屏选项嵌入 PDF

Embedding PDF with fullscreen option

php

html

pdf

iframe

embedding