我需要用 Thymeleaf 中的 pdf.js 编写一个自己的 PDF-Viewer，它可以搜索文本并呈现引用。但是 pdfjsViewer 库中的类 PDFViewer 只呈现前两个页面而不会抛出错误。 我当前的版本是 3.2.144
我使用 pdfjsViewer 库创建了 pdf-viewer、pdf-find-controller 和 pdf-link-service 的实例。使用 pdfViewer.setDocument(pdfDocument) 方法时，它通常应该正确呈现页面。
<!DOCTYPE html>
<html lang="en" dir="ltr" mozdisallowselectionprint>
<head>
<meta charset="utf-8">
<title>PDF.js viewer</title>
<meta charset="UTF-8">
<link rel="resource" type="application/l10n" href="locale/locale.properties">
<link rel="stylesheet" href="/assets/images/pdfjs-lib/web/pdf_viewer.css">
<style>
#viewer-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 500px;
}
</style>
</head>
<body>
<input type="text" id="search-box" placeholder="Search...">
<div id=" page-number"></div>
<div id="page-count"></div>
<div id="viewer-container">
<div id="viewer"></div>
</div>
<script src="/assets/images/pdfjs-lib/build/pdf.js"></script>
<script src="/assets/images/pdfjs-lib/build/pdf.min.js"></script>
<script src="/assets/images/pdfjs-lib/build/pdf.worker.js"></script>
<script src="/assets/images/pdfjs-lib/build/pdf.sandbox.js"></script>
<script src="/assets/images/pdfjs-lib/web/pdf_viewer.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// PDFViewerApplication.initialize();
const pdfUrl = '/assets/images/Diplomarbeiten/test.pdf';
const container = document.getElementById('viewer-container');
var viewer = document.getElementById('viewer');
//VERSION 3.2.146
pdfjsLib.GlobalWorkerOptions.workerSrc = '/assets/images/pdfjs-lib/build/pdf.worker.js';
const SEARCH_FOR = document.getElementById("search-box").value;
const eventBus = new pdfjsViewer.EventBus();
const SANDBOX_BUNDLE_SRC = "/assets/images/pdfjs-lib/build/pdf.sandbox.js";
var pdflinkService = new pdfjsViewer.PDFLinkService({
'eventBus': eventBus,
'externalLinkEnabled': true,
'externalLinkRel': 'nope',
'externalLinkTarget': 2 // Blank
});
// pdfObj.linkService = linkService;
pdfFindController = new pdfjsViewer.PDFFindController({
eventBus: eventBus,
linkService: pdflinkService,
});
// (Optionally) enable scripting support.
const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
eventBus,
sandboxBundleSrc: SANDBOX_BUNDLE_SRC,
});
var pdfViewer = new pdfjsViewer.PDFViewer(
{
'container': container,
'enableScripting': true, // Block embeded scripts for security
'enableWebGL': true,
'eventBus': eventBus,
'renderInteractiveForms': true, // Allow form fields to be editable
'textLayerMode': 1,
'findController': pdfFindController,
'scriptingManager': pdfScriptingManager,
'viewer': viewer,
}
);
pdflinkService.setViewer(pdfViewer);
pdfScriptingManager.setViewer(pdfViewer);
pdfjsLib.getDocument(pdfUrl).promise.then(function (pdfDocument) {
});
eventBus.on("pagesinit", function () {
// We can use pdfViewer now, e.g. let's change default scale.
pdfViewer.currentScaleValue = "page-width";
// We can try searching for things.
if (SEARCH_FOR) {
eventBus.dispatch("find", {type: "", query: SEARCH_FOR});
}
});
// Loading document.
const loadingTask = pdfjsLib.getDocument({
url: pdfUrl,
cMapUrl: '/assets/images/pdfjs-lib/cmaps/',
cMapPacked: true,
enableXfa: true,
});
(async function () {
const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfViewer.setDocument(pdfDocument);
pdflinkService.setDocument(pdfDocument, null);
})();
});
</script>
</body>
</html>