Question

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

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

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

由于pdf.js确实有API，我的想法是＆＃34; hook＆＃34;进入pdf.js并更改显示的文本（在我的情况下绰绰有余）

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

这是否可能（没有弄乱pdf.js本身）？如果是这样，怎么样？

编辑（3）

此代码会将PDF文本打印到控制台，但如何从那里开始是一个谜。

＆＃13;

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

＆＃13;

编辑（2）

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

编辑（1）

我确实试图操纵DOM（特别是前面提到的.textLayer > div），但是pdf.js使用DIV和canvas来做它的魔力，它不只是文本，所以结果是显示在画布顶部的文本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，并添加了更多内容。

如何修改pdf.js显示的文字？

编辑（3）

编辑（2）

编辑（1）

2 个答案: