在 IFrame（相同域）中嵌入 PDF 并控制高度（滚动条）

Posted 2023-03-05

【中文标题】在 IFrame（相同域）中嵌入 PDF 并控制高度（滚动条）

【英文标题】：Embed PDF in IFrame (same domain) and control height (scrollbars)

【发布时间】：2021-09-13 22:24:33

【问题描述】：

我想要达到的目标： 我有一个页面，其中包含一些页眉信息，然后是通过嵌入式 PDF 生成的文档，最后是一些页脚信息。理想情况下，这将显示为一个可以打印的连续文档。

我发现了什么： 我将 PDF 加载到页面上的 iframe 中。因为该文档不是公开的，所以它是通过服务器端操作请求的，该操作检查权限并将文档返回为 Content-Type: application/pdf;

这可以加载 PDF，但我无法关闭工具栏和其他嵌入式 PDF 查看器控件（小问题）

当我尝试在包含页面中使用 javascript 读取 iframe 文档高度以修改 iframe 高度并因此删除滚动条时，尽管从同一域、服务器等加载 PDF，但我遇到了跨域起源问题。

非常感谢任何帮助或指示。

【问题讨论】：

谢谢，但所有资源都在同一个域上。我想知道这是否是集成PDF查看器控件的问题（我正在使用Firefox进行测试）

【参考方案1】：

有一个独立的查看器，您可以使用它来显示 pdfs：

 <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

这不为你提供

工具栏和其他嵌入式 PDF 查看器控件

编辑：如果您不想使用上述选项，那么您也可以使用 PDF.js 一个打开的项目以 html 呈现 pdf。

<iframe id="pdf-js-viewer" src="/web/viewer.html?file=%2Fmy-pdf-file.pdf" title="webviewer" frameborder="0"  ></iframe>

【讨论】：

我已经用替代方法更新了我的答案

此 google 文档查看器不太可能工作，因为 PDF 文件仅对在服务器上具有登录会话的用户可用。

然后就可以使用pdf-js了