我在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。