Home Carbon Ads Adding Custom Content to Printed Web Pages

Adding Custom Content to Printed Web Pages

print-webpage

In this tutorial I will show you how to add custom text to a printed web page using CSS and JavaScript.

We can do this using CSS3 by using Pseudo Elements and Generated Content.

We can do this using JavaScript by using onafterprint and onbeforeprint.

Adding Image to the Printed Web Page using CSS

This is the CSS code to add an extra image to the web page when its printed.

    @media print {
        /*adding an image at the end of the printed page*/
            body:after{
                content:url(http://qtrack.qnimate.com/qtrack.jpg);
            }
            /*adding an image at the beginning of the printed page*/
            body:before{
                content:url(http://qtrack.qnimate.com/qtrack.jpg);
            }
    }

Adding Text to the Printed Web Page using CSS

This is the CSS code to add text to the webpage when its printed

    @media print {
        /*adding text at the end of the printed page*/
            body:after{
                content:"end";
            }
            /*adding text at the beginning of the printed page*/
            body:before{
                content:"beginning";
            }
    }

Adding Content using JavaScript

Here is the code to add content using JavaScript

function beforePrint() {
    //add some content
}
function afterPrint() {
    //remove the added content
}

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

Conclusion

Both the above methods rely on CSS3 media queries some way. Therefore if user’s browser doesn’t support media query then you are out of luck.

Narayan Prusty
Uploading Files and Showing Progress using Intel XDKFind Out When Your Email Has Been Read

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image5 years ago Web Development
Share this
Related Articles