Creating an interactive and dynamic Table of Contents with Puppeteer for PDF documents

Question

Creating an interactive and dynamic Table of Contents with Puppeteer for PDF documents

After researching extensively for a solution, most responses suggest that it is not possible. However, I stumbled upon Paged.js which appears to use the CSS code

a::after { content: target-counter(attr(href), page, decimal); }

effectively filling in the correct page numbers for the Table of Contents. This makes me wonder if they have a CSS polyfill within their library to address this issue. It seems unlikely that browsers support target-counter and ::after directly. Hence, I contemplated finding a CSS polyfill to enable target-counter and page-break-after: avoid, as demonstrated by paged.js.

An alternate approach I considered involves using a PDF parser to analyze all data in the PDF file, implementing regex patterns, loops, and other methods to identify page numbers of specific elements. Perhaps the parser's output could be stored in a JSON file accessible from the Table of Contents. Nonetheless, this method seems time-consuming, especially since another merge operation would be required on the PDF (already done once for the front page).

To elaborate further, I am interested in exploring whether either or both of these solutions are feasible. If so, any guidance on A. obtaining a polyfill for the essential CSS tags, or B. structuring and organizing data retrieved from the PDF parser, would be highly appreciated.

css node.js pdf puppeteer

Answer 1

Answer №1

If you're looking for a starting point for option B, the script below could be really helpful.

const fs = require('fs');
const pdf = require('pdf-parse');
const { Readable } = require("stream");
let dataBuffer = fs.readFileSync('./generated.pdf');
pdf(dataBuffer).then(function(data) {
    let toc ={}, page;
    const pagePattern = /Page [0-9]+\/[0-9]+/;
    const topicPattern = /Title: [A-Za-z 0-9]+/;
    const lines = data.text.split('\n');
    lines.forEach((chunk, i, lines) => {
        if(chunk.match(pagePattern)) {
            page = chunk
        }
        if(chunk.match(topicPattern) && !toc[chunk]) {
            toc[chunk] = page
        }
    });
    console.log(toc); // Utilize this object to populate your table of content
});

This information may prove valuable to someone in need.

Answer 2

If you're looking for a starting point for option B, the script below could be really helpful.

const fs = require('fs');
const pdf = require('pdf-parse');
const { Readable } = require("stream");
let dataBuffer = fs.readFileSync('./generated.pdf');
pdf(dataBuffer).then(function(data) {
    let toc ={}, page;
    const pagePattern = /Page [0-9]+\/[0-9]+/;
    const topicPattern = /Title: [A-Za-z 0-9]+/;
    const lines = data.text.split('\n');
    lines.forEach((chunk, i, lines) => {
        if(chunk.match(pagePattern)) {
            page = chunk
        }
        if(chunk.match(topicPattern) && !toc[chunk]) {
            toc[chunk] = page
        }
    });
    console.log(toc); // Utilize this object to populate your table of content
});

This information may prove valuable to someone in need.

Creating an interactive and dynamic Table of Contents with Puppeteer for PDF documents

Answer №1

Similar questions

What is the best way to establish the routes properly?

Is it possible to add more data to additional fields in a mongoose document after it has already been loaded?

Issue with sending both a string field and an image in one request when using Express, Node.js, and MySQL

Using Azure Functions in JavaScript to retrieve an image from a blob storage and convert it to a base64

Challenges with HTML and CSS drop-down menus

Experiencing a problem while trying to connect Sails JS with MySQL using Node v7.5.0

Node.js connection is limited to the localhost environment

Using JQuery to SlideUp with a Background Color Fading Behind an Image

Express script in Node runs into issues with require() not functioning properly

Is it possible to update the CSS file of an external SVG file in real-time?

What is the best way to manage json-parse errors in a node.js environment?

The occurrence of "Error [ERR_STREAM_WRITE_AFTER_END]" was noted when trying to write to an HTTP server in

The custom configuration file for SailsJS does not seem to be loading properly

Python script: Looping through a folder and saving the content to individual text documents

Eliminate any excessive space located at the bottom of the table

Using jQuery to toggle an open and close button

Writing with Node.js streams, reading content, then writing again

The text in the image caption has been drastically reduced along with the size of the image

Having trouble installing npm module on docker machine

What could be causing the undefined value for 'message' in relation to connect-flash?