首页 > 解决方案 > 使用全屏选项嵌入 PDF

问题描述

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

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

标签: phphtmlpdfiframeembedding

解决方案


除非您更换浏览器的默认查看器,否则您无法可靠地控制 PDF 体验。它们的行为都略有不同。但是,新的免费 Adob​​e 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


推荐阅读