使用全屏选项嵌入 PDF答案

【问题标题】：Embedding PDF with fullscreen option使用全屏选项嵌入 PDF
【发布时间】：2020-10-01 10:36:51
【问题描述】：

有没有办法将全屏选项添加到使用 iframe 嵌入的 PDF 中？

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

【问题讨论】：

标签： php html pdf iframe embedding

【解决方案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>

您可以在此处获取客户端 ID。 https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html

【讨论】：

Main.js 出于某种原因抛出 Uncaught TypeError: Cannot read property 'indexOf' of undefined at main.js?ver=5.4.2:1 at Object.Be7j (main.js?ver=5.4.2:1)。
您注册了一个clientID并使用它了吗？你能给我发一个你页面的链接吗？

【解决方案2】：

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

【讨论】：