Select a Target Media Type and Render HTML to PDF with Screen or Print Layout

Welcome to HiQPdf Demo

Collapse HTML to PDF

HTML to PDF Converter Demo

Merge Multiple HTML to PDF

Convert Multiple HTML Pages to PDF in Parallel

Add HTML in PDF Header and Footer

Add Header and Footer using Browser

Add Header and Footer on Merged PDF

Select HTML Elements to Convert to PDF

Select HTML Elements to Exclude from PDF

Retrieve HTML Element Positions in PDF

Add HTML Stamp to Generated PDF

Add Attachments to Generated PDF

Repeat HTML Table Header and Footer

Control PDF Page Breaks with CSS

Auto Create Outlines and Links

Auto Create Table of Contents

Auto Create PDF Forms from HTML Forms

Create PDF/UA and PDF/A Documents

Set Conversion Triggering Mode

Select Media Type for Rendering

Web Fonts Advanced Support

Convert Current View with Form Data

Convert Another View with Form Data

PDF Viewer Settings

PDF Security Settings

PDF Digital Signatures

Set HTTP Headers Demo

Set HTTP Cookies Demo

GET and POST Requests Demo

Expand HTML to Image

Expand PDF Creator

Expand PDF Editor

Expand Word to PDF

Expand Excel to PDF

Expand RTF to PDF

Expand Markdown to PDF

Markdown to PDF

Expand PDF to Text

Expand Find PDF Text

Expand PDF to Image

Expand PDF to Image

Extract PDF Images

Select Media Type When Converting HTML to PDF

In this demo you learn how to change the CSS properties of a HTML document based on media type selection. By default the HTML to PDF converter will render the HTML document for 'screen', but this can be changed when another media type is assigned to HtmlToPdf.MediaType property.

For example, when this property is set to 'print' the CSS properties defined by the '@media print' rule will be used when the HTML is rendered instead of the CSS properties defined by the '@media screen' rule.

HTML Code

<html>
<head>
    <title>
        HTML to PDF Rendering Changes Based on Selected Media Type
    </title>
    <style type="text/css">
        body {
            font-family: 'Arial';
            font-size: 16px;
        }

        @media screen {
            p {
                font-family: Verdana;
                font-size: 14px;
                font-style: italic;
                color: Green;
            }
        }

        @media print {
            p {
                font-family: 'Courier New';
                font-size: 12px;
                color: Black;
            }
        }

        @media screen,print {
            p {
                font-weight: bold;
            }
        }
    </style>
</head>
<body>
    <br /><br />
    The style of the paragraph below is changed based on
    the selected media type:
    <br /><br />
    <p>
        This is a media type selection test. When viewing on screen
        the text is bigger, italic and green. When printing the
        text is smaller, normal and black.
    </p>
</body>
</html>

Select Media Type: