显示 pdf 的搜索文本和页码

Question

我一直在寻找一个解决方案，我有一个 PDF 文件，我想搜索该文件中的特定文本，搜索文本的结果应该以列表格式显示，并附有页码。我寻找在线解决方案，但无法找到完美和合适的解决方案...

虽然在 adobe reader 中有相同类型的功能可用，称为 "comments"，用户可以在其中查看列表格式的所有搜索项目及其页码。

你的回答对我很有帮助，如果可能的话请也提供例子..

提前致谢。

Answer 1

下面的示例可能会帮助您显示使用 PDF.js 每页分组的找到的文本。

var searchText = "JavaScript";
function searchPage(doc, pageNumber) {
  return doc.getPage(pageNumber).then(function (page) {
    return page.getTextContent();
  }).then(function (content) {
    // Search combined 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.net/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.com/pdfjs-dist/build/pdf.js"></script>

显示 pdf 的搜索文本和页码

Show Searched text of a pdf along with page number

javascript

pdf

jquery

adobe-reader

pdf.js