Блог

Главная - Вопросы по программированию - Как искать текст с помощью PDF.js ?

Как искать текст с помощью PDF.js ?

#javascript #pdf.js

#javascript #pdf.js

Вопрос:

Может кто-нибудь, пожалуйста, привести недавний рабочий пример? Я уже неделю пытаюсь заставить работать один из многих примеров, которые я нашел в Google, но ни один из них не работает. Большинство из них не учитывают важную информацию, такую как версия pdf.js они используют. Всем им несколько лет, и с тех пор код базовой библиотеки изменился.

Я могу загрузить PDF-файл и просмотреть его, но не могу выделить из него текст.

Я просто хочу загрузить drawing.pdf, найти и выделить в нем некоторый текст, затем увеличить его. Мне не нужны решения, использующие существующий просмотрщик, у которого есть своя панель инструментов, или который использует iframes.

Вот некоторый код, который должен работать, но не работает в Chrome с

«PDFViewer не определен»

 <!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      #canvas_container {
        width: 800px;
        height: 450px;
        overflow: auto;
      }
    </style>
    <link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"
    ></script>
    <script
      type="text/javascript"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js"
    ></script>
    <script
      type="text/javascript"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/pdf_viewer.js"
    ></script>
  </head>
  <body>
    <div>TODO write content</div>
    <div id="my_pdf_viewer">
      <div id="canvas_container">
        <canvas id="pdf_renderer"></canvas>
      </div>
    </div>

    <script>
      var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1,
      };

      this.loadPdfDrawing = function (drawingName) {
        pdfjsLib.getDocument(drawingName).then((pdf) => {
          myState.pdf = pdf;
          render();
        });
      };

      function render() {
        myState.pdf.getPage(myState.currentPage).then((page) => {
          var canvas = document.getElementById("pdf_renderer");
          var ctx = canvas.getContext("2d");

          var viewport = page.getViewport(myState.zoom);
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          page.render({
            canvasContext: ctx,
            viewport: viewport,
          });
        });
      }

      var container = document.getElementById("my_pdf_viewer");
      var viewer = document.getElementById("canvas_container");

      var pdfViewer = new PDFViewer({
        container: container,
        viewer: viewer,
      });

      var pdfFindController = new PDFFindController({
        pdfViewer: pdfViewer,
      });

      pdfViewer.setFindController(pdfFindController);

      function findText(text) {
        pdfFindController.executeCommand("find", {
          caseSensitive: false,
          findPrevious: undefined,
          highlightAll: true,
          phraseSearch: true,
          query: text,
        });
      }

      document.addEventListener("DOMContentLoaded", function (event) {
        loadPdfDrawing("386-5001.pdf");
        findText("12.000");
      });
    </script>
  </body>
</html>

Отказано в выполнении скрипта из
‘https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js ‘
поскольку его MIME-тип (‘text / plain’) не является исполняемым и строгим
Включена проверка типа MIME. index.html:1 Отказался выполнить скрипт
из
‘https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js ‘
поскольку его MIME-тип (‘text / plain’) не является исполняемым и строгим
Включена проверка типа MIME. index.html:1 Отказался выполнить скрипт
из
‘https://raw.githubusercontent.com/mozilla/pdf.js/master/web/pdf_viewer.js ‘
поскольку его MIME-тип (‘text / plain’) не является исполняемым и строгим
Включена проверка типа MIME.

Комментарии:

1. Ты разобрался в этом? У меня такое же требование, и я застрял здесь тоже с той же ошибкой PDFViewer is not defined.

2. Нет, я этого не делал. Вы получаете то, за что платите за это. Дрянная, устаревшая документация. Мне пришлось двигаться дальше.