2016-02-19 3 views
4

Я показываю pdf-файл с pdf.js в своем приложении Ionic. Я не использую viewer.js и viewer.html, потому что мне нужен совершенно другой макет. Теперь у меня есть настраиваемая панель поиска, и я хочу выделить условия в моем файле pdf. Есть ли функция, которую я могу вызвать для этого?Как искать с pdf.js?

Я рендеринга файл, как это:

$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> 
+1

Зависит от того, что вы хотите делать с результатами. Если вы просто хотите найти страницу, используйте page.getTextContent(). Но если вы хотите отобразить, проверьте примеры/компоненты и используйте PDFFindController. – async5

+0

Спасибо за ваш ответ! Я попытался понять PDFFindController, но это кажется сложным. К сожалению, я не нашел примера, как его использовать. Знаете ли вы хороший учебник? –

+0

Я не думаю, что вам нужно понять логику. Просто найдите, как он используется в веб-файлах. – async5

ответ

6

Теперь я нашел решение!

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-файл.

+0

@chocolate_cake, это спасло мой день :) Вы нашли способ идентифицировать номер страницы, содержащий результаты поиска, для отображения только этой страницы? Или, наоборот, для прямого фокусирования на выделенный текст? Я могу видеть как matchCount, так и массив pageMatches, определенные в pdf_find_controller.js (https://searchcode.com/codesearch/view/58844381/), но я не могу понять, как их получить; даже после того, как документ загружен и подсветка отображается правильно, pdfFindController.matchCount возвращает ноль. Спасибо :) – derelict

+1

Hello @derelict! Мне очень приятно, что я могу вам помочь. Я изменил pdfjs так, чтобы он просто показывал одну страницу, и я искал на этой странице (Причина: проблемы с пермором на мобильных устройствах). Я думаю, что массив совпадений - правильный путь, но я не пытался это сделать. Возможно, вы могли бы получить длину прокрутки, вычислив pdfLength * pageNumber или что-то в этом роде и прокрутите вниз? –

+0

Любопытно, вы поняли это, используя какую-то документацию для инструмента 'viewer.js'? У меня возникли проблемы с использованием этого инструмента за пределами использования общей страницы 'viewer.html' –

Смежные вопросы