PDF.js – Utilisation de la fonction de recherche sur un PDF incorporé

J’ai intégré un fichier PDF à l’aide de PDF.js avec la balise iframe src=viewer.html?file=... J’utilise PDF.js et son viewer.html car il fournit déjà une fonction de recherche que je ne pouvais trouver dans aucun autre exemple.

J’aimerais que l’utilisateur puisse cliquer sur un

et utiliser le texte qui le contient pour rechercher le PDF et passer à la première occurrence. JSFiddle: http://jsfiddle.net/agyetcsj/

HTML

 6.5 Calling External Functions

JavaScript

 $('td').unbind('click').click(function () { alert("Find text in PDF!"); });

J’ai trouvé des questions similaires sur SO mais ils ne pouvaient pas vraiment répondre à ma question:

https://stackoverflow.com/questions/24439701/searching-embedded-pdfs-in-iframes
https://stackoverflow.com/questions/28322082/sencha-search-text-in-pdf-file-rendered-from-plugin-pdf-js
Accéder aux fonctions / événements de Viewer PDF.js

Merci!

Inspiré par la réponse de dev-random, j’ai ajouté le code suivant à viewer.js. J’ouvre mon pdf en passant des parameters d’URL, par exemple http: // localhost: 3000 / pdf / viewer.html? & Search = your_search_term . Ainsi, lorsque vous ouvrez le fichier PDF, la recherche est automatiquement effectuée, ce qui convient à mon cas d’utilisation.

 //Add this piece of code to webViewerInitialized function in viewer.js if ('search' in params) { searchPDF(params['search']); } //New function in viewer.js function searchPDF(td_text) { PDFViewerApplication.findBar.open(); PDFViewerApplication.findBar.findField.value = td_text; PDFViewerApplication.findBar.caseSensitive.checked = true; PDFViewerApplication.findBar.highlightAll.checked = true; PDFViewerApplication.findBar.findNextButton.click(); PDFViewerApplication.findBar.close(); }

Comme personne d’autre n’a répondu à ma question, je vais y répondre moi-même. Je l’ai finalement obtenu en utilisant viewer.html @ https://github.com/mozilla/pdf.js/tree/master/web .

Voici un exemple de code que j’ai écrit pour le faire fonctionner. J’espère que cela aidera quelqu’un d’autre à l’avenir.

 PDFView.open(pdf_url, 0); // search with PDF.js function searchPDF(td_text) { PDFView.findBar.open(); $(PDFView.findBar.findField).val(td_text); $("#tableDiv").focus(); var event = document.createEvent('CustomEvent'); event.initCustomEvent('find', true, true, { query: td_text, caseSensitive: $("#findMatchCase").prop('checked'), highlightAll: $("#findHighlightAll").prop('checked'), findPrevious: undefined }); return event; }

J’ai essayé d’implémenter l’approche de @ webstruck mais je n’ai pas pu résoudre l’erreur “PDFView n’est pas défini”. Je finis par résoudre comme ceci:

 //Add this piece of code to webViewerInitialized function in viewer.js if ('search' in params) { searchPDF(params['search']); }

a ensuite changé son approche en ceci:

 //New function in viewer.js function searchPDF(p_search_text) { var l_params = { query: p_search_text, phraseSearch: p_search_text }; webViewerFindFromUrlHash(l_params); }

Dans le code HTML de l’iframe, j’ai ajouté le terme & search = et j’ai obtenu ceci:

Travaillé comme un charme, tous les mots en surbrillance!