Set Printing Preferences From Js

From what I can find on the Google, I can't find a way to use Javascript to set my printing preferences (read: margins, orientations, footer, etc). I am about to tell my boss that

Solution 1:

So... after all day of looking, I think that I found the answer to my own question. In short, the answer is that JS and/or CSS will not allow you to override the default page setup of the client's browser.

Here is what I tried. If you create a simple HTML file with and empty head, and a body that only contains the text "Test", you will be able to see what I tested.

1. Print Style Sheets cannot solve your problem. Setting the margin on the body to 0px 0px 0px 0px is not the same thing as clicking File > Page Setup and setting all of your margins to 0. Despite what Print Style Sheeters would like you to believe, they are different. Try it for yourself. This is why Print Style Sheets do not solve your problem.

2. JS cannot solve your problem. Can you image if every page that you visited modified your local JS properties? To allow each page to have access to your local print setups would be a security breach, and is not allowed. Because of this, JS cannot solve your problem.

I would love to have someone respond here and let me know that I am wrong. Otherwise... this sucks... and it needs to happen. I have a ton of old users... and getting them to set the margins in their page setup is a pain. Also the customer don't want us to refactor the page so that they don't need to. I am in-between a rock and a hard spot.

Solution 2:

You can set page orientation and margin with CSS:

@page {
   size: landscape;
   margin: 10%
}

You can also set a footer at the bottom of each page by using the <tfoot> element.

EDIT: As pointed out by Beejamin, this is a half-way house. You can't really change printer preferences (those that appear in the Print Dialog when clicking Print). Also, IE is severely lacking in support for @page selector, (had a look around to see if IE9 supported it and couldn't find anything). As an alternative you could always try applying it to the body in your print stylesheet.

body {
   size: landscape;
   margin: 10%
}

Although off my head I'm not sure how effective this is.

Solution 3:

I think you're pretty much out of luck trying to do this in HTML and CSS. A big part of the issue is that printer margins are all specific to the type of printer: Most printers have a minimum margin they can set (equivalent to the space they need to grip the page, and the left/right movement of the head.

Acceptable margins will also vary based on paper size (the margin can typically be smaller on a smaller sheet than the maximum the printer will accept). For instance, if you load A5 paper into an A4 printer, the margins you can set will be different than if you load A4.

None of that information is available to the webpage, via CSS, javascript, or anything.

Now, as far as a solution goes, PDF files do allow you to embed some printer default settings within the file - Acrobat pro will allow you to specify scaling options, default numbers of copies, etc. I wouldn't mind betting that there are more potential settings available in the file format that Acrobat doesn't expose.

There are plenty of full-featured PDF generation tools for whichever server-side technology you use. the good ones will even allow you to provide a URL, and render HTML+CSS to PDF content - that would automate the generation to some extent. PDF generation is pretty CPU intensive though, and it wouldn't be seamless to the user, either (and would require PDF plugins for most browsers).

I know it's not ideal, but it's the avenue I'd look into. Good luck!

Solution 4:

Using CSS will help you achieve that.

@page {
  margin:0cm;
}

Solution 5:

You can change some preferences.

Like Orientation:

@media print {
    @page {
        size: A1|A4|A5 landscape; /* auto is default portrait; */
    }
}

To hide the footer and header text generated by the default settings, you can do this trick:

@media print {
    @page {
        margin: 0!important;
    }

    body {
        padding: 75px; /* This will act as your margin. Originally, the margin will hide the header and footer text. */
    }
}

I think you can add also some text on Header and Footer part but still not tried. You may refer here. https://www.w3.org/TR/css-page-3/#at-ruledef-right-top