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

Question

我没有尝试修改 PDF，我只是尝试更改显示的文本

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

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

由于 pdf.js 确实有 API，我的想法是“挂钩”到 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 和画布来发挥它的魔力，它不仅仅是文本，所以结果是文本 div 显示在顶部画布（或其他方式），请参阅：

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

Answer 1

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

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

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

jsfiddle 是从以下资源创建的：

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

Answer 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
      });
    }

在上面的代码中，您可以通过添加console.log 来检查是否调用了getTextContent，并添加更多您想要的内容。