如何使用 pdf.js 进行搜索

How to search with pdf.js?

本文关键字：搜索 js 何使用 pdf      更新时间：2023-09-26

我正在我的 Ionic App 中显示一个带有 pdf.js 的 pdf 文件。我不使用查看器.js和查看器.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"
});

我不得不导入查看器.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
})

使用最新版本的pdfjs，这可以工作，但在控制台中使用调度事件时出错。此代码将删除该错误并按预期工作。

const iframeDocument = document.getElementById('pdf-js-viewer').contentWindow;
let searchText = "TheTextYouWantoToHighlight";
iframeDocument.PDFViewerApplication.eventBus.dispatch('find', {
    caseSensitive: false,
    findPrevious: undefined,
    highlightAll: true,
    phraseSearch: true,
    query: searchText
});
相关文章：