我试图在我的项目中实现PDF.js，但它比预期的要难。
目前，我可以在div中渲染整个PDF，但我不能渲染标准工具栏查看器;你可以在这个演示页面的顶部看到一个示例：https://mozilla.github.io/pdf.js/web/viewer.html
我的JS代码看起来像这样：
var url = '/filemanager/example.pdf';
var pdfScale = 1;
PDFJS.workerSrc = '/js/pdfJs/build/pdf.worker.js';
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: pdfScale };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
renderPDF(url, document.getElementById('the-canvas'));个字符
那么.我怎么能像演示页面的所有控件的工具栏查看器？
2条答案
按热度按时间6kkfgxo01#
不幸的是，PDF.js包maintainers have decided to remove viewer.html from their pre-built distribution NPM package是因为：
我们担心最终用户会将Firefox PDF Viewer误认为是自定义网站部署，这将增加我们的支持负载。
您可以手动复制此文件夹，但这意味着您还需要手动更新它，这对于现代Web应用程序开发来说不是理想的方法。
虽然他们已经为Web开发人员发布了可重用组件，但关于如何实际利用这些组件的信息并不多：
我们正在慢慢地重构查看器，以提供一组可嵌入的API，因此自定义查看器可以轻松地部署在自定义网站上，同时也减轻了网站开发人员的UI自定义负担。
所有的例子、文章和第三方包（我选择的框架）都实现了自己的UI特性。
如果有人有更多关于如何构建PDF.js组件的例子，我们有兴趣阅读更多关于它的内容。
fnvucqvd2#
您可以使用最简单的方法：
src属性和查看器源路径（/pdfjs-4.0.189-dist/web/viewer.html），PDF文件的路径（?file=compressed.tracemonkey-pldi-09.pdf）和一些定义的参数：<iframe src="/pdfjs-4.0.189-dist/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf#page=2&zoom=200&pagemode=thumbs"></iframe>个file：要使用的PDF文件路径（由于JavaScript限制，必须位于同一服务器上）。必须使用encodeURIComponent进行编码，例如/viewer.html？file=%2Fpdf.js%2Fweb%2Fcompressed.tracemonkey-pldi-09.pdfpage：页码。示例：page=2zoom：缩放级别。示例：zoom=200（接受的格式：[zoom]、[left offset]、[top offset]、page-width、page-height、page-fit、auto）search：按文本搜索phrase：按短语搜索（接受值：true，false）pagemode：sidebar state。示例：pagemode=none（接受值：none、thumbs、bookmarks、attachments）pdfjs-viewer-element包是一个用于PDF.js查看器的Web组件 Package 器，基于此方法。API展示页面可能有助于直观地测试这些参数。此外，使用此包，您可以选择查看器UI本地化，手动设置查看器CSS主题（暗/亮/自动），或添加自定义CSS。