如何在PdfJs 3.4.120中显示标准工具栏，同时使用画布元素?

Question

我正在尝试使用Pdfjs 3.4.120版本在我的spring引导mvc应用程序的jsp页面中显示pdf文件。

当我使用iFrame和viewer.html时，会显示一个标准的工具栏(示例)，但根据我的要求，我不能使用iFrame。使用canvas元素，我无法看到工具栏，只能呈现pdf。

我已经看了那么多的文章和帖子，但没有任何帮助。

下面是我的代码:

$.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>

Answer 1

PDF.js的主要目标是为Firefox浏览器提供一个PDF查看器，用于查看本地PDF文件，目前，将其集成到项目中以拥有自定义UI和功能并不容易。

pdfjs-dist包只导出PDF.js的一些核心API，所有的查看器层API没有完全导出，所以你不能从pdfjs-dist导入工具栏。

你可以构建自己的工具栏，拥有基本功能应该不难。如果你真的想使用默认工具栏，你必须自定义PDF.js的构建过程来导出工具栏，使用相同的Dom结构，初始化工具栏的方式与PDF.js完全相同。这是很多工作。

如果你只想用默认工具栏显示PDF，你可以尝试https://github.com/Priestch/document-viewer由我维护，它是用JavaScript编写的，目标是使集成PDF查看器的过程尽可能容易。它具有PDF.js的所有功能。