Question

我正在将PDF嵌入到我的网页中。我正在做一些愚蠢的事情来隐藏状态栏（包括下载按钮和页码），以便可以从外部控制它们（我希望能够在他们尝试下载文档时强制进行其他下载）。如果有什么不同（例如在框架下只能工作/不工作的解决方案），那么我正在使用React。

我可以使用URL设置PDF的活动页面，但是在加载该页面之后，我无法获取文档的滚动位置来更新页面编号。

我认为解决方案是将嵌入的PDF包含在我可以亲自控制的div中。为此，我希望嵌入的对象的高度是PDF所有页面组合的垂直高度的总和，然后将其装入具有设置高度的div中。我可以从那里监视文档的滚动位置，以确定当前页面。

<div class='encasing-div'>
    <div class='toolbar'/>
    <object data='some.pdf' type='application/pdf'>
        <embed src='some.pdf' type='application/pdf' wmode='opaque'/>
    </object>
</div>

我无法使嵌入式PDF成为文档的完整高度。我知道页面加载时文档中的页数，但是我不知道如何/是否可以使用它来适当地调整高度。

如何使嵌入对象成为整个PDF的高度，从而消除嵌入对象的滚动并允许使用外部滚动？

编辑：这是一张试图解释我正在寻找的图片。在图片的第二部分中，div外部的内容将被隐藏但可以滚动到。

Answer 1

一旦我遇到了同样的问题，我便找到了这段代码，它可以为我解决所有问题，希望它也能为您提供帮助

<div class="PDfDiv">
     <object data="some.pdf" type="application/pdf"  height="100%" width="100%">
          <param name="src"value="some.pdf" />
     </object>
  </div>

，然后在您的CSS中添加：

.PDfDiv{
    height: 100vh;
}

Answer 2

您可以使用iframe代替对象并嵌入

<!DOCTYPE html>
<html style="height:100%">
<body style="height:100%">

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<div style="height:100%">
        <iframe src="some.pdf" height="100%" width="100%""></iframe>
</div>

</body>
</html>

Answer 3

重新考虑您的解决方案。如果您依靠浏览器显示PDF，则无法在所有情况下都可以使用它。每个浏览器都使用不同的UI来显示PDF，并且它们经常发生变化。而是使用pdf.js之类的内容自己控制显示。然后，您可以根据需要添加和删除导航元素。

制作一个包含整个PDF高度的可滚动div

3 个答案: