DEV Community

It's Just Nifty
It's Just Nifty

Posted on • Originally published at niftylittleme.com on

Downloading Webpages As PDFs With PHP And JavaScript

The results - Cropped Screenshot

Converting HTML to a PDF in PHP was easy. Let's bring it up a notch and convert a webpage to a PDF file using PHP and JavaScript.

To do this, you will need to install Composer and Node.

After installing those things, you will need to install Dompdf using Composer and Puppeteer using npm (Node package manager):

composer require dompdf/dompdf

npm install puppeteer
Enter fullscreen mode Exit fullscreen mode

Create a HTML file (Example: index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage to Pdf</title>
</head>
<body>
    <main>
        <form action="web-pdf.php" method="get">
            <label for="url">Website URL:</label>
            <input type="text" id="url" name="url" required>
            <button type="submit">Download Content</button>
        </form>
    </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Create a PHP file (Example: web-pdf.php):

<?php
require 'vendor/autoload.php';

use Dompdf\Dompdf;

if (isset($_GET['url'])) {
    $url = escapeshellarg($_GET['url']);
    $content = shell_exec("node download.js {$url}");

    try {
        convertHTML($content);
    } catch (Exception $e) {
        echo "Some error: " . $e->getMessage();
    }
} else {
    echo "No URL provided.";
}

function convertHTML($content) {
    $dompdf = new Dompdf();
    $dompdf->loadHtml($content);

    // Setup the paper size and orientation
    $dompdf->setPaper('A4', 'landscape');

    // Render the HTML as PDF
    $dompdf->render();

    ob_end_clean();

    // Output the generated PDF
    $dompdf->stream();
}
?>
Enter fullscreen mode Exit fullscreen mode

Lastly, create a JavaScript File to use Puppeteer (Example: download.js):

const puppeteer = require('puppeteer');

// Get URL from command-line arguments
const url = process.argv[2];

(async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url); // Use the URL passed from PHP
    await page.waitForSelector('main', { timeout: 10000 }); // Adjust selector and timeout as needed

    const content = await page.content();
    console.log(content);

    await browser.close();
  } catch (error) {
    console.error('Error:', error);
  }
})();
Enter fullscreen mode Exit fullscreen mode

Note: Remove the ten second timeout or change the element (main) if the content is not what you expect.

There you go! Just like that, you have a webpage to PDF converter.

Happy Coding Folks!

Top comments (0)