Select HTML Elements to Convert to Image

Use this demo to convert selected parts of an HTML page to Image by entering a CSS selector. You can either provide a page URL or paste HTML code, optionally with a base URL. The selector allows you to choose exactly which content will be included in the image. You can choose to remove or simply hide the unselected elements and you can also automatically adjust the image page height to match the selected content.

Convert HTML with Base URL

Convert URL or Local File

HTML String to Convert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Select HTML Elements to Convert to PDF</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header, footer {
            background-color: #e0e0e0;
            text-align: center;
            padding: 20px;
            color: #333;
        }

        #ConvertedHtmlElement {
            padding: 30px;
            background-color: #ffffff;
            margin: 20px auto;
            max-width: 800px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .image-container {
            text-align: center;
            margin: 20px 0;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }

        h2 {
            color: #0055a5;
        }

        code {
            background-color: #eef;
            padding: 2px 5px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

    <header>
        <h1>Select HTML Elements to Convert to PDF</h1>
        <p>This header will not be included in the PDF.</p>
    </header>

    
    <div id="ConvertedHtmlElement">
        <h2>Content to be Exported as PDF</h2>
        <p>This section contains the HTML elements that will be included in the generated PDF file. It includes text, images and basic formatting.</p>

        <div class="image-container">
            <a href="http://www.evopdf.com">
                <img alt="Logo Image" src="img/small_logo.png" />
            </a>
        </div>
    </div>

    <footer>
        <p>This is the footer section that should not be included in the PDF.</p>
    </footer>

</body>
</html>

Base URL

Converted HTML Elements Options

CSS Selector:

Enable CSS Selector

Remove Unselected Elements