[英]How to search with pdf.js?
我在我的 Ionic App 中显示一个带有 pdf.js 的 pdf 文件。 我不使用 viewer.js 和 viewer.html,因为我需要完全不同的布局。 现在我有一个自定义搜索栏,我想突出显示我的 pdf 文件中的术语。 有没有我可以调用的函数来做到这一点?
我正在渲染这样的文件:
$scope.renderPages = function(pdfDoc) {
$scope.pdfFile = pdfDoc;
for(var num = 1; num <= pdfDoc.numPages; num++){
pdfDoc.getPage(num).then($scope.renderPage);
}
}
$scope.renderPage = function(page) {
var viewport = page.getViewport(1);
scale = document.getElementById('viewer').clientWidth / viewport.width;
viewport = page.getViewport(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;
var canvasContainer = document.getElementById('viewer');
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
HTML:
<div id="viewerContainer" style="padding-bottom: 100%; padding-top: 20px;">
<div id="viewer" class="viewer-styles">
</div>
</div>
现在我找到了解决方案!
var container = document.getElementById('viewerContainer');
var viewer = document.getElementById('viewer');
var pdfViewer = new PDFViewer({
container: container,
viewer: viewer
});
$scope.pdfFindController = new PDFFindController({
pdfViewer: pdfViewer
);
pdfViewer.setFindController($scope.pdfFindController);
container.addEventListener('pagesinit', function () {
pdfViewer.currentScaleValue = 'page-width';
});
PDFJS.getDocument(MY_PATH_TO_THE_PDF).then(function (pdfDocument) {
pdfViewer.setDocument(pdfDocument);
});
搜索条件:
$scope.pdfFindController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: "myQuery"
});
我必须导入viewer.js。
我不再需要在问题中发布的代码了。 PDFViewer呈现pdf。
这是一个旧线程,但我认为人们现在应该知道这个包是如何工作的。 我设法使它以下列方式工作。 我正在使用 iframe 来显示 pdf。
const iframeDocument = document.getElementById('pdf-js-viewer').contentWindow;
let searchText = "TheTextYouWantoToHighlight";
iframeDocument.PDFViewerApplication.pdfViewer.findController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: searchText
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.