How to Stop User from Printing Webpages? Using JavaScript or Jquery

How to stop user from printing webpages? using javascript or jquery

A webpage on a user's machine is out of your control. A user can do whatever he or she wants to do, however you can serve a PDF and disable printing that PDF. Still, if I have to print some thing I will find a way to print it.

I want to disable printing and saving of a webpage from file menu with JQUERY or JAVASCRIPT

You can have a CSS style that will only be visible when printing:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Then I guess you can do something like:

*{
    color:#fff !important;
    background:#fff !important;
    line-height:0 !important;
    font-size:0 !important;
    height:0 !important;
    width:0 !important;
    /*...*/
}

Here is also a tutorial.

This won't prevent printing, but should work for what you want.

About preventing the page to be saved, that is impossible, if they are viewing the page, they already downloaded it actually. The best you can is to obfuscate your code to make it unreadable.

Obfuscating/Compressor Tools:

• HTML
• CSS
• JavaScript

How to disable printing options in the browser for certain pages

You cannot disable the actual buttons/menu items but you can use following in required pages to prevent printing:

<style type="text/css" media="print">
BODY {display:none;visibility:hidden;}
</style>

How to Disable the CTRL+P using javascript or Jquery?

You can't prevent the user from printing, but you can hide everything when the user prints the document by using simple CSS:

<style type="text/css" media="print">
    * { display: none; }
</style>

Updated fiddle.

If you would like to show the visitor a custom message when he/she try to print rather then just a blank page, it's possible with client side code but first wrap all your existing contents like this:

<div id="AllContent">
    <!-- all content here -->
</div>

And add such a container with the custom message:

<div class="PrintMessage">You are not authorized to print this document</div>

Now get rid of the <style type="text/css" media="print"> block and the code would be:

if ('matchMedia' in window) {
    // Chrome, Firefox, and IE 10 support mediaMatch listeners
    window.matchMedia('print').addListener(function(media) {
        if (media.matches) {
            beforePrint();
        } else {
            // Fires immediately, so wait for the first mouse movement
            $(document).one('mouseover', afterPrint);
        }
    });
} else {
    // IE and Firefox fire before/after events
    $(window).on('beforeprint', beforePrint);
    $(window).on('afterprint', afterPrint);
}

function beforePrint() {
    $("#AllContent").hide();
    $(".PrintMessage").show();
}

function afterPrint() {
    $(".PrintMessage").hide();
    $("#AllContent").show();
}

Code is adopted from this excellent answer.

Updated fiddle. (showing message when printing)

Stop User from using Print Scrn / Printscreen key of the Keyboard for any Web Page

You can't disable screen grabbing from the Web browser, it would only be possible by installing additional software on the user's PC.

There are some IRM (Information Rights Management) tools available that do that e.g. by protecting Windows/DirectX API calls and also monitoring video memory such as Oracle IRM or such as Microsoft's IRM technology.

Especially the latter might be of interest as there is also a Rights Management Add-on for Internet Explorer.

But as other already said, any IRM/DRM technology is controversy and you should understand that it most often will limit or annoy your users.

how to restrict user not to perform browser save as , print action

The Save-As-Feature is handled by browsers differently. Some just copy their cached files, some make a new request and rewrite up files to a local structure. It IS possible to undergo every protection you might think of!

But, if you really care, you can at least make it a little less easy to save your content with some javascript and css hacks. (see this link also suggested)

1. disable printing by setup a print-stylesheet with *{display:none} - very annoying for the user, but works
2. disable the right mouse-button, to not let the user see your source - very, very annoying, and most actions can be used via the browser navigation menu.
3. disable the clipboard - most users won't see that "feature", but it works.
4. disable the save-as by dynamic loading of content could work in some browsers. for doing this, you have to present a page with just javascript (or at least a header, footer, etc) that loads the content of your page with ajax on page load.

Disable Clipboard & Print Screen on webpage

No. I am pretty sure you can't do that. Print screen is a part of the OS, not the browser. I would hope that web sites weren't able to mess with my OS like that.

You can certainly throw roadblocks in front of people trying to download an image, but short of watermarking, there isn't a great way to prevent people from getting your image (that I know of) if you make it available online.

---

Related Topics