How to Enable Text Selection in PDF.JS

We have already used Javascript aka Mozilla's PDF.js to display a PDF in How to display a PDF with Javascript.

In that PDF viewer a person can view the file but cannot select the text inside the PDF file. This limitation is overcome with the call to a method in PDF.js.

This method is renderTextLayer. As can be seen from the name, the method renders the text as a layer over the PDF.

PDF.JS version 1.9 is used in the tutorial.

Step 1: Adding a <div> Element to Hold the Text Layer

<div id="text-layer"></div>

This div will be in addition to the <canvas> element where the PDF is rendered, so the HTML will look like :

<canvas id="pdf-canvas"></canvas>
<div id="text-layer"></div>

Step 2 : Adding CSS for Text Layer

Add the following to your CSS file :

#text-layer { 
   position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0.2;
    line-height: 1.0;
}

#text-layer > div {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

Step 3: Getting the PDF Text

After the PDF has been rendered in the canvas, you need to get the text contents of the PDF, and place that text in the text layer.

// page is the page context of the PDF page
// viewport is the viewport required in renderContext
// For more see https://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons    

page.render(renderContext).then(function() {
    // Returns a promise, on resolving it will return text contents of the page
    return page.getTextContent();
}).then(function(textContent) {
     // PDF canvas
    var pdf_canvas = $("#pdf-canvas"); 

    // Canvas offset
    var canvas_offset = pdf_canvas.offset();

    // Canvas height
    var canvas_height = pdf_canvas.get(0).height;

    // Canvas width
    var canvas_width = pdf_canvas.get(0).width;

    // Assign CSS to the text-layer element
    $("#text-layer").css({ left: canvas_offset.left + 'px', top: canvas_offset.top + 'px', height: canvas_height + 'px', width: canvas_width + 'px' });

    // Pass the data to the method for rendering of text over the pdf canvas.
    PDFJS.renderTextLayer({
        textContent: textContent,
        container: $("#text-layer").get(0),
        viewport: viewport,
        textDivs: []
    });
});

Showing Links in the PDF ?

See the tutorial How to Enable Annotations in PDF.JS to know how to render clickable links.