Включить выделение текста в PDF JS

Введение

PDF JS отлично подходит для отображения PDF-файлов на вашем милом веб-сайте. На момент написания этой статьи он был встроен в браузер Mozilla Firefox и отвечает за автоматическую визуализацию PDF-файлов в браузере.

Руководства и ссылки

Самой по себе официальной документации немного не хватает, см. здесь или направленные документы здесь. Тем не менее, есть несколько онлайн-ресурсов, которые довольно полезны, например:

• https://usefulangle.com/post/90/javascript-pdfjs-enable-text-layer — конкретно рассказывает о том, как отображать текст. Однако используемая библиотека довольно старая и работает не совсем так, как вы ожидали.
• https://medium.com/geekculture/how-to-use-pdf-js-and-how-to-create-a-simple-pdf-viewer-for-your-web-in-javascript-5cff608a3a10 — отличное общее руководство

Шаг первый: скрипты

Вам понадобится способ получить сценарии pdfjs в вашем проекте. Самый простой способ — через CDN, но веб-пакеты или сборки с исходным кодом также являются хорошей альтернативой. Мы будем использовать CDN.

На момент написания была доступна версия 3.5.141.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf_viewer.min.css" />

pdf-viewer CSS требуется для оформления содержимого.

Шаг 2: Инициализируйте работника

Загрузите рабочий файл pdf-js и псевдоним PDF js для удобства.

const PDFJS = window['pdfjs-dist/build/pdf'];
// Note: Worker version should be same to pdf-js
PDFJS.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.worker.min.js';

Убедитесь, что рабочая версия совпадает с версией pdf-js, иначе у вас могут возникнуть проблемы.

Шаг 3: Загрузите документ

Этот шаг более-менее стандартный, как описано в примерах официальных документов, по сути загружая документ (из URL-адреса или необработанных данных), затем при необходимости обрабатывая промисы.

PDFJS.getDocument({ url: pdf_url }).promise.then(function (pdf_doc) {
    __PDF_DOC = pdf_doc;
    // Do things...
    // Show the first page
    showPage(1);
}).catch(function (error) {
    // An error occurred
});

Шаг 4: визуализация страницы и отображение текста

Здесь мы визуализируем PDF-файл на холсте и накладываем на него текстовый слой. Нам понадобятся следующие элементы:

<canvas id="pdf-canvas" width="400"></canvas>
<div id="text-layer" class="textLayer"></div>

Примечание.Класс textLayer жизненно важен для стилей (помните стили pdf_viewer, которые мы добавили?)

В функцию рендеринга вашей страницы добавьте еще один вызов для рендеринга наложения текста.

function showPage(page_no) {
    // ...

    // Fetch the page
    __PDF_DOC.getPage(page_no).then(function (page) {
        // Get viewport of the page at required scale
        let viewport = page.getViewport({
            scale: 1,
        });

        // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
        let scale = __CANVAS.width / viewport.width;
        viewport = page.getViewport({
            scale: scale
        });

        // Set canvas height
        __CANVAS.height = viewport.height;

        var renderContext = {
            canvasContext: __CANVAS_CTX,
            viewport: viewport
        };

        // Render the page contents in the canvas
        page.render(renderContext).promise.then(function () {
            // ...

            // Return the text contents of the page after the pdf has been rendered in the canvas
            return page.getTextContent();
        }).then(function (textContent) {
            // Get canvas offset
            var canvas_offset = $("#pdf-canvas").offset();

            // Clear HTML for text layer
            $("#text-layer").html('');

            // Assign the CSS created to the text-layer element
            document.getElementById('text-layer').style.setProperty('--scale-factor', viewport.scale);
            $("#text-layer").css({ left: canvas_offset.left + 'px', top: canvas_offset.top + 'px'});

            // Pass the data to the method for rendering of text over the pdf canvas.
            PDFJS.renderTextLayer({
                textContentSource: textContent,
                container: $("#text-layer").get(0),
                viewport: viewport,
                textDivs: []
            });
        });
    });
}

Вот и все.

Исходный код

Исходный код доступен на github

Заключение

PDF JS рулит!