I'm not trying to modify the PDF, I'm just trying to change the displayed text

pdf.js outputs text it reads in a bunch of divs .textLayer > div, it also draws a canvas

I read here that viewing and editing pdf in the browser is almost impossible, but...

Since pdf.js does have an API, my idea is to "hook" into pdf.js and change the displayed text (that's more than enough in my case)

The closest I could find is this function named getTextContent(), but there are no callback registered AFAICS.

Is this even possible (without messing with pdf.js itself)? If so, how?

EDIT (3)

This code will print the PDF text into console, but how to proceed from there is a mystery to me.

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

I'm not trying to modify the PDF, I'm just trying to change the displayed text

pdf.js outputs text it reads in a bunch of divs .textLayer > div, it also draws a canvas

I read here that viewing and editing pdf in the browser is almost impossible, but...

Since pdf.js does have an API, my idea is to "hook" into pdf.js and change the displayed text (that's more than enough in my case)

The closest I could find is this function named getTextContent(), but there are no callback registered AFAICS.

Is this even possible (without messing with pdf.js itself)? If so, how?

EDIT (3)

This code will print the PDF text into console, but how to proceed from there is a mystery to me.

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

EDIT (2)

The code example that I'm trying to mess with is viewer.js. Granted it's not the easiest example, but it's the simplest one that I could find that implements text in DOM

EDIT (1)

I did try to manipulate the DOM (specifically the .textLayer > div I mentioned earlier), but pdf.js uses both DIVs and canvas to do its magic, it's not just text, so the result was text div shown on top of the canvas (or the other way around), see:

https://i.sstatic/JvEUN.jpg

• javascript
• pdf
• pdf.js

• PDF.js "converts" pdf to html, if the text is indeed text and not an image of text then you should be able to manipulate the html directly – Jaromanda X Commented Aug 15, 2017 at 5:28
• @JaromandaX I edited my post, but I got stuck with canvas tag, THAT would be awesome if I could achieve text manipulation using just the DOM – TheDude Commented Aug 15, 2017 at 6:22
• I think it can be done. It has a promise after the document finish loading and it returns the document itself. Can you update your question and provide a plete example on how are you using it right now? – Christos Lytras Commented Aug 17, 2017 at 15:34
• @ChristosLytras: my apologies for the delay, I edited my post to point to code example (I tried to e up with my own example, but I miserably failed :() – TheDude Commented Aug 20, 2017 at 13:37
• If I got you correctly you want to modify the text that is in the PDF file. I would get the SVG version of the template you want to edit, change the text in the SVG and then convert that SVG to PDF - pdf.js is used only for viewing pdf files not editing Its content. – Muhamed Krlić Commented Aug 24, 2017 at 9:42

2 Answers 2

The reason for the first edit effect is because pdfjs uses hidden div elements to enable text selection. In order to prevent pdfjs from rendering text on the canvas without modifying the script you can add the following code:

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

Also if you want to avoid the text manipulation in the html elements you can render them yourself with the same method you print to console. Here is a working jsfiddle that changes Hello, world! to Burp! :)

The jsfiddle was created from the following resources:

• Text rendering - http://bl.ocks/hubgit/600ec0c224481e910d2a0f883a7b98e3
• SO question for hiding text - In PDF.js, how do you hide the canvas and display the underlying text at full opacity?

You can make extra code in pdf.js.

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

In above code you can check if getTextContent is called by adding console.log and add more content you want.