Как изменить текст, показанный pdf.js?

Я не пытаюсь изменить PDF, я просто пытается изменить отображаемый текст

pdf.js выводит текст, который он читает в кучке divs .textLayer > div, также рисует холст

I читайте здесь, что просмотр и редактирование pdf в браузере практически невозможно, но...

Так как у pdf.js есть API, моя идея - "подключить" к pdf.js и изменить отображаемый текст ( что более чем в моем случае)

Скорее всего, я нашел эту функцию с именем getTextContent(), но нет зарегистрированного AFAICS с обратным вызовом.

Возможно ли это (без возиться с самим pdf.js)? Если да, то как?

EDIT (3)

Этот код напечатает PDF-текст в консоли, но, как исходить из этого, есть тайна для меня.

'use strict';

// In production, the bundled pdf.js shall be used instead of SystemJS.
Promise.all([System.import('pdfjs/display/api'),
System.import('pdfjs/display/global'),
System.import('pdfjs/display/network'),
System.resolve('pdfjs/worker_loader')])
    .then(function (modules)
    {
        var api = modules[0], global = modules[1];

        // In production, change this to point to the built `pdf.worker.js` file.
        global.PDFJS.workerSrc = modules[3];

        // Fetch the PDF document from the URL using promises
        let loadingTask        = api.getDocument('cv.pdf');

        loadingTask.onProgress = function (progressData) {
            document.getElementById('progress').innerText = (progressData.loaded / progressData.total);
        };

        loadingTask.then(function (pdf)
        {
            // Fetch the page.
            pdf.getPage(1).then(function (page)
            {
                var scale     = 1.5;
                var viewport  = page.getViewport(scale);

                // Prepare canvas using PDF page dimensions.
                var canvas    = document.getElementById('pdf-canvas');
                var context   = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width  = viewport.width;

                // (Debug) Get PDF text content
                page.getTextContent().then(function (textContent)
                {
                    console.log(textContent);
                });

                // Render PDF page into canvas context.
                var renderContext =
                {
                    canvasContext: context,
                    viewport     : viewport
                };
                page.render(renderContext);
            });
        });
    });

ОТВЕТЫ

Ответ 1

Причина первого эффекта редактирования заключается в том, что pdfjs использует скрытые элементы div для включения выбора текста. Чтобы файл pdfjs не отображался на холсте без изменения script, вы можете добавить следующий код:

CanvasRenderingContext2D.prototype.strokeText = function () { };
CanvasRenderingContext2D.prototype.fillText = function () { };

Также, если вы хотите избежать манипуляции с текстом в элементах html, вы можете сделать их самостоятельно с помощью того же метода, который вы печатаете на консоли. Вот рабочий jsfiddle, который меняет Hello, world! на Burp!:)

jsfiddle был создан из следующих ресурсов:

Ответ 2

Вы можете сделать дополнительный код в pdf.js.

getTextContent: function PDFPageProxy_getTextContent(params) {
      return this.transport.messageHandler.sendWithPromise('GetTextContent', {
        pageIndex: this.pageNumber - 1,
        normalizeWhitespace: params && params.normalizeWhitespace === true ? true : false,
        combineTextItems: params && params.disableCombineTextItems === true ? false : true
      });
    }

В приведенном выше коде вы можете проверить, вызван ли getTextContent, добавив console.log и добавить больше контента, которое вы хотите.