javascript - 如何更改 pdf.js 显示的文本？

Question

我不是要修改 PDF，我只是尝试更改显示的文本

pdf.js 在一堆 div .textLayer > div 中输出它读取的文本，它还绘制了一个 Canvas

我read here在浏览器中查看和编辑 pdf 几乎是不可能的，但是......

因为 pdf.js 确实有一个 API ，我的想法是“ Hook ”到 pdf.js 并更改显示的文本(这对我来说已经足够了)

我能找到的最接近的是这个名为 getTextContent() 的函数, 但没有回调注册 AFAICS。

这甚至可能吗(不会弄乱 pdf.js 本身)？如果是，怎么办？

---

编辑(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);
            });
        });
    });

---

编辑(2)

我试图弄乱的代码示例是 viewer.js .虽然这不是最简单的示例，但它是我能找到的在 DOM 中实现文本的最简单的示例

---

编辑(1)

我确实尝试操纵 DOM(特别是我之前提到的 .textLayer > div)，但是 pdf.js 同时使用 DIV 和 Canvas 来发挥它的魔力，它不仅仅是文本，所以结果是文本 div 显示在 Canvas 顶部(或相反)，请参阅:

http://imgur.com/a/2hoZZ

Answer 1

出现第一个编辑效果的原因是因为pdfjs使用了隐藏的div元素来启用文本选择。为了防止 pdfjs 在不修改脚本的情况下在 Canvas 上呈现文本，您可以添加以下代码:

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

此外，如果您想避免在 html 元素中进行文本操作，您可以使用打印到控制台的相同方法自行呈现它们。这是一个工作 jsfiddle将 Hello, world! 更改为 Burp! :)

jsfiddle 是从以下资源创建的:

• 文本呈现 - http://bl.ocks.org/hubgit/600ec0c224481e910d2a0f883a7b98e3
• SO 隐藏文本的问题 - In PDF.js, how do you hide the canvas and display the underlying text at full opacity?