J'affiche un fichier pdf avec pdf.js dans mon Ionic App. Je n'utilise pas viewer.js et viewer.html, car j'ai besoin d'une disposition totalement différente. Maintenant, j'ai une personnalisation barre de recherche et je veux mettre en évidence les termes dans mon fichier pdf. Existe-t-il une fonction que je peux invoquer pour ce faire?
Je rend le fichier comme ceci:
$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>
Maintenant, j'ai trouvé la solution!
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);
});
Recherche de termes:
$scope.pdfFindController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: "myQuery"
});
Et j'ai dû importer le viewer.js.
Le code que j'ai posté dans la question n'est plus nécessaire. Le PDFViewer rend le pdf.