Is it possible to create table of content page using puppeteer and NodeJS?

 Yes, it is possible to create a table of contents (TOC) page using Puppeteer and Node.js.

To create a TOC page using Puppeteer, you can follow these steps:

  1. Use Puppeteer to open the webpage that you want to generate a TOC for.

  2. Use the page.evaluate() function to execute JavaScript code that will extract the headings from the webpage. You can use the document.querySelectorAll() function to select all of the headings on the page, and the map() function to create an array of objects representing each heading. Each object should include the heading text and the heading level (e.g., h1, h2, h3).

  3. Use the page.setContent() function to create a new HTML page that will contain the TOC.

  4. Use the map() function to iterate over the array of heading objects, and use the innerHTML property to insert the heading text into the new HTML page.

  5. Use the page.goto() function to navigate to the new TOC page.

Here is an example of how this might look in code:

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate to the webpage await page.goto('https://example.com'); // Extract the headings from the webpage const headings = await page.evaluate(() => { const headingElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); return Array.from(headingElements).map((heading) => { return { text: heading.innerText, level: heading.tagName.toLowerCase() } }); }); // Create a new HTML page for the TOC let tocHtml = '<h1>Table of Contents</h1>'; headings.forEach((heading) => { tocHtml += `<h${heading.level}>${heading.text}</h${heading.level}>`; }); await page.setContent(tocHtml); // Navigate to the TOC page await page.goto('data:text/html,' + encodeURIComponent(tocHtml)); await browser.close(); })();



Comments