如何使用 pdf.js 进行搜索? [英] How to search with pdf.js?
本文介绍了如何使用 pdf.js 进行搜索?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在我的 Ionic 应用程序中显示一个带有 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 = 函数(页面){var viewport = page.getViewport(1);scale = document.getElementById('viewer').clientWidth/viewport.width;视口 = page.getViewport(scale);var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var renderContext = {画布上下文:ctx,视口:视口};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">
解决方案
现在我找到了解决方案!
var container = document.getElementById('viewerContainer');var viewer = document.getElementById('viewer');var pdfViewer = 新的 PDFViewer({容器:容器,观众:观众});$scope.pdfFindController = 新的 PDFFindController({pdfViewer: pdfViewer);pdfViewer.setFindController($scope.pdfFindController);container.addEventListener('pagesinit', function () {pdfViewer.currentScaleValue = '页面宽度';});PDFJS.getDocument(MY_PATH_TO_THE_PDF).then(function (pdfDocument) {pdfViewer.setDocument(pdfDocument);});
搜索词:
$scope.pdfFindController.executeCommand('find', {区分大小写:假,findPrevious:未定义,亮点全部:真实,短语搜索:真实,查询:我的查询"});
我不得不导入viewer.js.
不再需要我在问题中发布的代码.PDFViewer 呈现 pdf.
I'm displaying a pdf file with pdf.js in my Ionic App. I do not use viewer.js and viewer.html, because I need a totally different layout. Now I have a custom search bar and I want to highlight terms in my pdf file. Is there a function I can invoke to do this?
I'm rendering the file like this:
$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>
解决方案
Now I found the 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);
});
Search for terms:
$scope.pdfFindController.executeCommand('find', {
caseSensitive: false,
findPrevious: undefined,
highlightAll: true,
phraseSearch: true,
query: "myQuery"
});
And I had to import the viewer.js.
The code that I posted in the question is not needed anymore. The PDFViewer renders the pdf.
这篇关于如何使用 pdf.js 进行搜索?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文