英文:
How to show standard toolbar in PdfJs 3.4.120 while using Canvas element?
问题
以下是您要翻译的代码部分：
$.ajax({
//some code
}).done(function(data, textStatus, jqXHR) {
var pdfData = new Uint8Array(data);
var pdfContainer = document.getElementById('pdfContainer');
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";
pdfjsLib.getDocument({ data: pdfData }).promise.then(function(pdf) {
for(pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
pdf.getPage(pageNum).then(page => {
const canvas = document.createElement('canvas');
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
var outputScale = window.devicePixelRatio || 1;
var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
var renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
pdfContainer.appendChild(canvas);
});
}
});
})
<div id="pdfContainer"></div>
英文:
I'm trying to display a pdf file in my spring boot-MVC application's jsp page using Pdfjs 3.4.120 version.
When I use iFrame and viewer.html, a standard toolbar(example) gets displayed but as per my requirement I can't use iFrame. With canvas element I'm unable to see a toolbar and only pdf gets rendered.
I've gone through so many articles and posts but nothing helped.
following is my code:
$.ajax({
//some code
}).done(function(data, textStatus, jqXHR) {
var pdfData = new Uint8Array(data);
var pdfContainer = document.getElementById('pdfContainer');
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdf.worker.min.js";
pdfjsLib.getDocument({ data: pdfData }).promise.then(function(pdf) {
for(pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
pdf.getPage(pageNum).then(page => {
const canvas = document.createElement('canvas');
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
var outputScale = window.devicePixelRatio || 1;
var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
var renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
pdfContainer.appendChild(canvas);
});
}
});
})
<div id="pdfContainer"></div>
答案1
得分: 1
PDF.js的主要目标是为Firefox浏览器提供PDF查看器，以查看本地PDF文件。目前，将其集成到项目中以具备自定义UI和功能并不容易。
pdfjs-dist包仅导出PDF.js的一些核心API，完全未导出查看器层API，因此无法从pdfjs-dist导入工具栏。
您可以构建自己的工具栏，拥有基本功能应该不难。如果您真的想使用默认工具栏，您需要自定义PDF.js的构建过程以导出工具栏，并使用与PDF.js相同的DOM结构，以完全相同的方式初始化工具栏。这是一项繁重的工作。
如果您只想显示带有默认工具栏的PDF，您可以尝试使用我维护的https://github.com/Priestch/document-viewer，它是用纯JavaScript编写的，目标是尽可能简化集成PDF查看器的过程。它具备PDF.js的所有功能。
英文:
The primary goal of PDF.js is to ship a PDF viewer for Firefox browser to view local PDF files, currently, it's not easy to integrate into a project to have custom UI and features.
The pdfjs-dist package only export some core API of PDF.js, all the viewer layer API are not exported totally, so you can't import the toolbar from pdfjs-dist.
You can build your own toolbar, it shouldn't be that hard to have basic functions. If you really want to use the default toolbar, you have to custom the build process of PDF.js to export the toolbar, use the same Dom structure, initialize the toolbar exactly the same way like PDF.js. It's a lot of work.
If you only want to show PDF with the default toolbar, you can try https://github.com/Priestch/document-viewer maintained by me, it's written in vanilla JavaScript, the goal is to make the process of integrating a PDF viewer as easy as possible. It has all the features of PDF.js.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论