pdf - 多个 pdf.js 实例

Question

我有一个单页应用程序，在这个应用程序中，我有不同的页面，它们使用 pdf.js 显示不同的 pdf。我一直遇到问题，因为一旦我初始化 pdf.js 一次，它就会为每个不同的实例使用这些设置，或者看起来是这样。

我希望能够在每次访问这些页面时销毁 pdf.js 对象并创建一个新对象。到目前为止，我还没有找到销毁方法，我尝试删除 Canvas 对象，关闭 PDFViewerApplication 但我仍然遇到这些问题。

我看到的一些错误是:
-覆盖已注册
-offsetParent 未设置 -- 无法滚动

Answer 1

最快的答案是您的单页网站可以使用框架。

* { border: 0; margin: 0; padding: 0; overflow: hidden; }
iframe { width: 100%; height: 50%; width: 100vw; height: 50vh; }

<iframe src="http://mozilla.github.io/pdf.js/web/viewer.html"></iframe>
<iframe src="http://mozilla.github.io/pdf.js/web/viewer.html"></iframe>

JavaScript 全局对象将绑定(bind)到各自框架的 Window 对象，并且不会相互干扰。

您可以使用 Mozilla 的示例，更改 viewer.js 以从查询变量或位置的哈希组件中提取。使用一些参数(例如 ?path=document123.pdf)为框架编写 URL。或 #document123.pdf .

如果您需要 销毁一，你可以破坏框架。如果您需要 操纵 一，您可以使用 CORS 到达框架内部( XSS， security 规则， contentWindow 允许...) (或 (iframe.contentDocument || iframe.contentWindow.document) )在 iframe element 上.

如果您无法通过 直接联系contentWindow ，您可以使用 构建一个脚本来发送和接收信号 postMessage ，或者只是完成框架脚本中的所有工作。