javascript - Show Searched text of a pdf along with page number - Stack Overflow

admin管理员组

文章数量:1324903

I was looking for a solution where i have a PDF file and i want to search a particular text in that file and the result of that searched text should e in a list format along with its page number. I looked for online solution but was unable to find the perfect and proper solution to it...

Although there is same type of feature available in adobe reader which is called as "ments" where user can view all the searched items in a list format along with its page numbers.

Your answer would be really helpful for me and if possible please provide example too..

Thank you in advance.

I was looking for a solution where i have a PDF file and i want to search a particular text in that file and the result of that searched text should e in a list format along with its page number. I looked for online solution but was unable to find the perfect and proper solution to it...

Although there is same type of feature available in adobe reader which is called as "ments" where user can view all the searched items in a list format along with its page numbers.

Your answer would be really helpful for me and if possible please provide example too..

Thank you in advance.

• javascript
• jquery
• pdf
• pdf.js
• adobe-reader

Share Improve this question Follow asked May 11, 2017 at 8:24 Abhishek SolankiAbhishek Solanki 4311 gold badge11 silver badge88 bronze badges 2

• You mentioned PDF.js in the tags, but did not describe why. There is example that prints text for each page (github./mozilla/pdf.js/blob/master/examples/node/getinfo.js), which can be adapted to do what you just asked. – async5 Commented May 11, 2017 at 16:09
• Thank you @async5, well i am using PDF.js library by default and there's client's requirement that he wants to display all the text that are searched. So i was looking for the same, and well i am new to this PDF.js so can you please help me with a working example of the example you just mentioned may be a fiddle or any other example would be good, it would be really helpful for me. Thank you in advance. – Abhishek Solanki Commented May 12, 2017 at 5:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Here is the example that might help you to display found text grouped per page using PDF.js.

var searchText = "JavaScript";
function searchPage(doc, pageNumber) {
  return doc.getPage(pageNumber).then(function (page) {
    return page.getTextContent();
  }).then(function (content) {
    // Search bined text content using regular expression
    var text = content.items.map(function (i) { return i.str; }).join('');
    var re = new RegExp("(.{0,20})" + searchText + "(.{0,20})", "gi"), m;
    var lines = [];
    while (m = re.exec(text)) {
      var line = (m[1] ? "..." : "") + m[0] + (m[2] ? "..." : "");
      lines.push(line);
    }
    return {page: pageNumber, items: lines};
  });
}

var loading = PDFJS.getDocument("//cdn.mozilla/pdfjs/tracemonkey.pdf");
loading.promise.then(function (doc) {
  var results = [];
  for (var i = 1; i <= doc.numPages; i++)
    results.push(searchPage(doc, i));
  return Promise.all(results);
}).then(function (searchResults) {
  // Display results using divs
  searchResults.forEach(function (result) {
    var div = document.createElement('div'); div.className="pr"; document.body.appendChild(div);
    div.textContent = 'Page ' + result.page + ':';
    result.items.forEach(function (s) {
      var div2 = document.createElement('div'); div2.className="prl"; div.appendChild(div2);
      div2.textContent = s; 
    });
  });
}).catch(console.error);

.pr { font-family: sans-serif; font-weight: bold; }
.prl { font-style: italic; font-weight: normal; }

<script src="//npmcdn./pdfjs-dist/build/pdf.js"></script>

本文标签： javascriptShow Searched text of a pdf along with page numberStack Overflow