如何在 PDF.js 中将 blob 传递给 viewer.js 以及如何在单独的窗口中显示 pdf [英] How to pass blob to the viewer.js in PDF.js and how to display pdf in separate window

问题描述

我已在画布中加载了 pdf，但无法将其传递给 PDF.js 中的 viewer.js.示例仅显示如何传递到画布而不是 viewer.js，我想在不同的窗口中加载 pdf

I have loaded the pdf in canvas but unable to pass it to viewer.js in PDF.js. Examples only show how to pass to canvas not to viewer.js and i want to load the pdf in different window

推荐答案

我花了一整天的时间才让 pdf.js viewer.html 正常工作.

It took me an entire day to get pdf.js viewer.html working.

这就是我能够使用 pdf.js viewer.html 呈现解码后的 base64 数据的方式

This is how I am able to render decoded base64 data using pdf.js viewer.html

(添加 pdf.js 包括)

(Add pdf.js includes)

1. 将 iFrame 添加到您的 html 页面.

这是我的.我使用 PHP.

Here's mine. I use PHP.

<iframe id="pdfViewer" src="<?php echo get_stylesheet_directory_uri() . '/includes/pdfjs/web/viewer.html'?>" style="width: 100%; height: 515px;" allowfullscreen="" webkitallowfullscreen=""></iframe>

1. 接下来，在 Javascript 中获取你的 iframe 并设置解码后的数据，如图所示

1. Next, get your iframe in Javascript and set the decoded data as shown

 // data is already decoded from base64 in previous steps
 var pdfjsframe = document.getElementById('pdfViewer');
 pdfjsframe.contentWindow.PDFViewerApplication.open(data);

就是这样！

这篇关于如何在 PDF.js 中将 blob 传递给 viewer.js 以及如何在单独的窗口中显示 pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！