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

【问题标题】：Making a scrollable div that encompasses the entire height of the PDF制作一个包含 PDF 整个高度的可滚动 div
【发布时间】：2019-10-10 07:08:36
【问题描述】：

我正在将 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 之外的东西将被隐藏但可以滚动到。

【问题讨论】：

标签： html css reactjs pdf

【解决方案1】：

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

【讨论】：

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

【讨论】：

同上一个问题。我不希望嵌入/iframe 是包含 div 的高度，我希望它是页面组合高度的高度。

【解决方案3】：

好吧，一旦我遇到了同样的问题，我发现了这段代码，它为我解决了所有问题，希望它也能帮助你

<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;
}

【讨论】：

这不会产生我想要的效果。在您的示例中包含 pdf 的 div 是视口的高度 - 这是正确的。