Can anyone provide a simple example of PDF.js that allows for text selection in a minimalist design?

Question

Can anyone provide a simple example of PDF.js that allows for text selection in a minimalist design?

Currently experimenting with PDF.js.

An issue I'm facing is that the text selection feature is not supported in the Hello World demo. It simply renders everything onto a canvas without displaying the text layer. On the other hand, the official PDF.js demo does offer text selection but its code seems overly complicated. Is there a simpler demonstration available that includes the text layer functionality?

javascript pdf.js

Answer 1

Answer №1

~~I successfully submitted the example to Mozilla's pdf.js repository, accessible in the examples directory.~~

The initial example I contributed to pdf.js is no longer available, but I believe that this one demonstrates text selection. The text-selection logic has been revamped within the text-layer of the reorganized pdf.js code, generated using a factory.

In particular, PDFJS.DefaultTextLayerFactory efficiently manages the fundamental aspects of text selection.

Note: The following example is outdated and retained here for historical reference.

I encountered difficulties with this issue over the past 2-3 days, but finally managed to resolve it. View a demonstration illustrating how to load a PDF with enabled text selection here.

The challenge lied in disentangling the text-selection mechanism from the viewer-related code (viewer.js, viewer.html, viewer.css). To make it functional, I had to isolate relevant code snippets and CSS properties (the JavaScript file referenced there can also be accessed here). The final outcome is a simplified demo likely to be beneficial. For proper implementation of text selection, the CSS styles in viewer.css play a crucial role in configuring the styling for subsequently created divs intended for text selection functionality.

The core functionality is handled by the TextLayerBuilder object responsible for generating the selection divs. References to this object are visible within viewer.js.

Below you'll find both the code snippet and associated CSS. Remember, you will still require the pdf.js file. My fiddle includes a link to a customized version sourced from Mozilla's GitHub repo for pdf.js. I opted not to directly link to the repository's version due to ongoing developments which might cause disruptions.

HTML:

<html>
    <head>
        <title>Basic pdf.js text-selection showcase</title>
    </head>

    <body>
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </body>
</html>

CSS:

.pdf-content {
    border: 1px solid #000000;
}

/* CSS classes utilized by TextLayerBuilder to stylize the text layer divs */

/* Crucial for preventing text display when selecting */
::selection { background:rgba(0,0,255,0.3); }
::-moz-selection { background:rgba(0,0,255,0.3); }

.textLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: #000;
    font-family: sans-serif;
    overflow: hidden;
}

.textLayer > div {
    color: transparent;
    position: absolute;
    line-height: 1;
    white-space: pre;
    cursor: text;
}

.textLayer .highlight {
    margin: -1px;
    padding: 1px;

    background-color: rgba(180, 0, 170, 0.2);
    border-radius: 4px;
}

.textLayer .highlight.begin {
    border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
    border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
    border-radius: 0px;
}

.textLayer .highlight.selected {
    background-color: rgba(0, 100, 0, 0.2);
}

JavaScript:

//Demonstration of minimal PDF rendering and text selection using pdf.js by Vivin Suresh Paliath (http://vivin.net)
//This fiddle incorporates a compiled pdf.js version encompassing all necessary modules.
//
//For simplicity, PDF data retrieval does not involve external sources. Instead, the data is stored internally.
//
//Understanding text selection was challenging as the selection logic intertwines heavily with viewer.html and viewer.js. 
//Relevant portions were extracted into a separate file to exclusively implement text selection. Key component is TextLayerBuilder
//managing creation of text selection divs, added as an external resource.
//
//The demo showcases a single-page PDF rendering. Customization for additional pages is possible, focusing on text selection.
//Additional importance lies in the included CSS setting up styling for selected text overlays.
//
//Reference point for rendered PDF document:
//http://vivin.net/pub/pdfjs/TestDocument.pdf

var pdfBase64 = "..."; //contains base64 representing the PDF

var scale = 1; //Set zoom factor as required.

/**
 * Converts a base64 string into a Uint8Array
 */
function base64ToUint8Array(base64) {
    var raw = atob(base64); 
    var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
    for(var i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
    }

    return uint8Array;
}

function loadPdf(pdfData) {
    PDFJS.disableWorker = true; 

    var pdf = PDFJS.getDocument(pdfData);
    pdf.then(renderPdf);                               
}

function renderPdf(pdf) {
    pdf.getPage(1).then(renderPage);
}

function renderPage(page) {
    var viewport = page.getViewport(scale);
    var $canvas = jQuery("<canvas></canvas>");

    var canvas = $canvas.get(0);
    var context = canvas.getContext("2d");
    canvas.height = viewport.heigh...

Answer 2

~~I successfully submitted the example to Mozilla's pdf.js repository, accessible in the examples directory.~~

The initial example I contributed to pdf.js is no longer available, but I believe that this one demonstrates text selection. The text-selection logic has been revamped within the text-layer of the reorganized pdf.js code, generated using a factory.

In particular, PDFJS.DefaultTextLayerFactory efficiently manages the fundamental aspects of text selection.

Note: The following example is outdated and retained here for historical reference.

I encountered difficulties with this issue over the past 2-3 days, but finally managed to resolve it. View a demonstration illustrating how to load a PDF with enabled text selection here.

The challenge lied in disentangling the text-selection mechanism from the viewer-related code (viewer.js, viewer.html, viewer.css). To make it functional, I had to isolate relevant code snippets and CSS properties (the JavaScript file referenced there can also be accessed here). The final outcome is a simplified demo likely to be beneficial. For proper implementation of text selection, the CSS styles in viewer.css play a crucial role in configuring the styling for subsequently created divs intended for text selection functionality.

The core functionality is handled by the TextLayerBuilder object responsible for generating the selection divs. References to this object are visible within viewer.js.

Below you'll find both the code snippet and associated CSS. Remember, you will still require the pdf.js file. My fiddle includes a link to a customized version sourced from Mozilla's GitHub repo for pdf.js. I opted not to directly link to the repository's version due to ongoing developments which might cause disruptions.

HTML:

<html>
    <head>
        <title>Basic pdf.js text-selection showcase</title>
    </head>

    <body>
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </body>
</html>

CSS:

.pdf-content {
    border: 1px solid #000000;
}

/* CSS classes utilized by TextLayerBuilder to stylize the text layer divs */

/* Crucial for preventing text display when selecting */
::selection { background:rgba(0,0,255,0.3); }
::-moz-selection { background:rgba(0,0,255,0.3); }

.textLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: #000;
    font-family: sans-serif;
    overflow: hidden;
}

.textLayer > div {
    color: transparent;
    position: absolute;
    line-height: 1;
    white-space: pre;
    cursor: text;
}

.textLayer .highlight {
    margin: -1px;
    padding: 1px;

    background-color: rgba(180, 0, 170, 0.2);
    border-radius: 4px;
}

.textLayer .highlight.begin {
    border-radius: 4px 0px 0px 4px;
}

.textLayer .highlight.end {
    border-radius: 0px 4px 4px 0px;
}

.textLayer .highlight.middle {
    border-radius: 0px;
}

.textLayer .highlight.selected {
    background-color: rgba(0, 100, 0, 0.2);
}

JavaScript:

//Demonstration of minimal PDF rendering and text selection using pdf.js by Vivin Suresh Paliath (http://vivin.net)
//This fiddle incorporates a compiled pdf.js version encompassing all necessary modules.
//
//For simplicity, PDF data retrieval does not involve external sources. Instead, the data is stored internally.
//
//Understanding text selection was challenging as the selection logic intertwines heavily with viewer.html and viewer.js. 
//Relevant portions were extracted into a separate file to exclusively implement text selection. Key component is TextLayerBuilder
//managing creation of text selection divs, added as an external resource.
//
//The demo showcases a single-page PDF rendering. Customization for additional pages is possible, focusing on text selection.
//Additional importance lies in the included CSS setting up styling for selected text overlays.
//
//Reference point for rendered PDF document:
//http://vivin.net/pub/pdfjs/TestDocument.pdf

var pdfBase64 = "..."; //contains base64 representing the PDF

var scale = 1; //Set zoom factor as required.

/**
 * Converts a base64 string into a Uint8Array
 */
function base64ToUint8Array(base64) {
    var raw = atob(base64); 
    var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));
    for(var i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
    }

    return uint8Array;
}

function loadPdf(pdfData) {
    PDFJS.disableWorker = true; 

    var pdf = PDFJS.getDocument(pdfData);
    pdf.then(renderPdf);                               
}

function renderPdf(pdf) {
    pdf.getPage(1).then(renderPage);
}

function renderPage(page) {
    var viewport = page.getViewport(scale);
    var $canvas = jQuery("<canvas></canvas>");

    var canvas = $canvas.get(0);
    var context = canvas.getContext("2d");
    canvas.height = viewport.heigh...

Answer 3

Answer №2

Since this question and answer are from a while back, you'll need to make some adjustments to get it to work with more recent versions of PDF.JS. Here's a helpful solution:

http://www.example.com/convert-pdf-to-html-canvas-using-pdf-js

Below is the code snippet they used: Include the following CSS and scripts from the PDF.js library

<link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />
<script src="pdf.js/web/ui_utils.js"></script>
<script src="pdf.js/web/text_layer_builder.js"></script>

Use this code to load the PDF :

PDFJS.getDocument("example.pdf").then(function(pdf){
    var page_num = 1;
    pdf.getPage(page_num).then(function(page){
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        var canvas = $('#the-canvas')[0];
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var canvasOffset = $(canvas).offset();
        var $textLayerDiv = $('#text-layer').css({
            height : viewport.height+'px',
            width : viewport.width+'px',
            top : canvasOffset.top,
            left : canvasOffset.left
        });

        page.render({
            canvasContext : context,
            viewport : viewport
        });

        page.getTextContent().then(function(textContent){
           console.log( textContent );
            var textLayer = new TextLayerBuilder({
                textLayerDiv : $textLayerDiv.get(0),
                pageIndex : page_num - 1,
                viewport : viewport
            });

            textLayer.setTextContent(textContent);
            textLayer.render();
        });
    });
});

Answer 4

Since this question and answer are from a while back, you'll need to make some adjustments to get it to work with more recent versions of PDF.JS. Here's a helpful solution:

http://www.example.com/convert-pdf-to-html-canvas-using-pdf-js

Below is the code snippet they used: Include the following CSS and scripts from the PDF.js library

<link rel="stylesheet" href="pdf.js/web/text_layer_builder.css" />
<script src="pdf.js/web/ui_utils.js"></script>
<script src="pdf.js/web/text_layer_builder.js"></script>

Use this code to load the PDF :

PDFJS.getDocument("example.pdf").then(function(pdf){
    var page_num = 1;
    pdf.getPage(page_num).then(function(page){
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        var canvas = $('#the-canvas')[0];
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var canvasOffset = $(canvas).offset();
        var $textLayerDiv = $('#text-layer').css({
            height : viewport.height+'px',
            width : viewport.width+'px',
            top : canvasOffset.top,
            left : canvasOffset.left
        });

        page.render({
            canvasContext : context,
            viewport : viewport
        });

        page.getTextContent().then(function(textContent){
           console.log( textContent );
            var textLayer = new TextLayerBuilder({
                textLayerDiv : $textLayerDiv.get(0),
                pageIndex : page_num - 1,
                viewport : viewport
            });

            textLayer.setTextContent(textContent);
            textLayer.render();
        });
    });
});

Answer 5

Answer №3

If you're looking to display all the pages of a PDF document on different pages while still allowing text selection, there are a couple of options available:

Utilize a PDF viewer
Use a combination of canvas and renderer to parse the text and place it onto the canvas in a way that mimics text selection.

However, in practical terms, if you plan on implementing features like zooming in or out using the canvas, this could significantly impact your browser's performance. Please refer to the following URL for more information:

You can access the complete code from the link below: https://github.com/explorethis/simpleChatApp/tree/master/pdfViewer

Answer 6

If you're looking to display all the pages of a PDF document on different pages while still allowing text selection, there are a couple of options available:

Utilize a PDF viewer
Use a combination of canvas and renderer to parse the text and place it onto the canvas in a way that mimics text selection.

However, in practical terms, if you plan on implementing features like zooming in or out using the canvas, this could significantly impact your browser's performance. Please refer to the following URL for more information:

You can access the complete code from the link below: https://github.com/explorethis/simpleChatApp/tree/master/pdfViewer

Can anyone provide a simple example of PDF.js that allows for text selection in a minimalist design?

Answer №1

Answer №2

Answer №3

Similar questions

Display the output of JSON.stringify in a neatly formatted table

Script in Powershell for converting multiple .csv files to .html format and managing the conversion process

Obtaining the value of a specific dynamic `<td>` element using jQuery

Glitch in Mean App: front-end feature malfunctioning during data storage in mongodb

What is the best way to redirect a user to a different URL in Express while also sending additional data along with the request

What is the method for retrieving a value with a designated key?

Utilizing the v-for directive to loop through JSON data with unique IDs and linking them to Input components in PrimeVue

Provide the remaining arguments in a specific callback function in TypeScript while abiding by strict mode regulations

What can you create with Angular 4, the angular material 2 library, and angular flex-layout

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Is it possible to rewrite this function recursively for a more polished outcome?

What is the best way to populate all data in select2 (4.0) upon page load?

What could be causing my JavaScript code to malfunction, even though it appears to be coded correctly?

I would like to include the value of the "file_id" variable in the href attribute of an appended HTML element, but it seems

Sending a document to a nodeJS server

Refreshing CKFinder Form Field with jQuery

What's the best way to track changes in multiple form fields simultaneously in Angular?

The latest update to the Server Stats code mistakenly changes the channel to "undefined" instead of displaying the total number

Ways to store data in the localStorage directly from a server

Guide to transforming a JSON file value into a JavaScript list