QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
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.

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

Leave a Reply Cancel 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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Adding Image to the Printed Web Page using CSS
  • Adding Text to the Printed Web Page using CSS
  • Adding Content using JavaScript
  • Conclusion
Related Articles
  • Styling Text using CSS
  • Media Queries Tutorial
  • Facebook Style Face Detection and Tagging with JavaScript
  • CSS3 :before and :after Psuedo-Elements and Generated Content
  • Typing Effect using JavaScript
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license