2

For printing differently from what is rendered on the screen, we use @media print rule. Well and good. But I want to display in browser window what exactly is going to be printed before the print dialog box pops up. Is there a way to do this?

Raghuram Vadapalli
  • 1,190
  • 2
  • 13
  • 27
  • http://stackoverflow.com/questions/18803151/how-to-trigger-media-query-on-user-demand-with-javascript – JNF Nov 10 '15 at 13:51
  • The problem is not with resizing.I want to display what is going to be printed on the browser window. – Raghuram Vadapalli Nov 10 '15 at 13:55
  • An idea completely out of the box may be to use an iframe that sets its `head` `meta` as a printer and not a web page? But I don't know how to do that, technically, if possible. – Vadorequest Nov 10 '15 at 13:55
  • @user3930007, same logic should apply – JNF Nov 10 '15 at 14:15
  • 2
    Browsers come with Print Preview options. Let the user use them. There's no need to reproduce common built-in functionality. – Quentin Nov 10 '15 at 16:29
  • @Quentin Yes of course, do you know if the `@media print` kicks in, cross browser, as it does when using `window.print()`? – Asons Nov 10 '15 at 18:56
  • @LGSon — Should do. It would be a pretty awful print preview if it previewed the screen stylesheet! – Quentin Nov 10 '15 at 23:53

1 Answers1

3

You can use the same concept from this post, How to trigger media query on user demand with javascript, but instead you trigger/toggle a class name of your body tag, named say previewprint, with a button.

And your css could look like this:

body.previewprint .yourclass {
   property: value;
}

@media print {
  .yourclass {
    property: value;
  }
}

One way is to add a separate "Preview" button which sets the previewprint and the "Print" button reset/clear it.

If you don't want to have double css rules, then just using just the previewprint class would be fine if you open the page in a new window with the "Preview" button, and once there, users can click "Print" button. In this case the "print css rules" is already set and no need for a media query.

If to only use a "Print" button, do the same and then execute window.print() on load.

I also found this nice post, how to detect window.print() finish, where you can do some cool stuff when a print finishes.

To intercept Ctrl+P, here is a few posts showing how that can be done:

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Your solution works fine. But can we do it without duplication? – Raghuram Vadapalli Nov 10 '15 at 15:11
  • @user3930007 Updated my answer slightly, to show a way without duplicate rules ... this also make it more "old browser friendly", for browsers who don't support media queries. – Asons Nov 10 '15 at 16:24
  • this also works but if a user presses ctrl+P, then no action will be triggered. – Raghuram Vadapalli Nov 28 '15 at 11:07
  • These 2 posts shows some ways to intercept ctrl+P: http://stackoverflow.com/questions/11349129/fire-javascript-function-when-ctrlp-is-pressed and http://stackoverflow.com/questions/12517819/how-to-listen-for-ctrl-p-key-press-in-javascript – Asons Nov 28 '15 at 12:47