I'm trying to print the page in landscape format through javascript. I've found some solutions at Landscape printing from HTML, but those don't fit my need.

The CSS snippet @media print{@page {size: landscape}} works fine, but I'm not sure how to make it work from javascript/jquery. The reason I'm trying to do this through javascript is because I want 2 buttons for printing. One normal print button which will print the content like it's displayed, and a second button which changes the page a bit and prints it landscape mode.

So in short: I want to change the page orientation (or size as it's called in CSS) to landscape in javascript but the javascript rotation won't do because it also rotates the text on the page. Is there a way to achieve what I'm trying to do without making a separate page using a different layout/CSS?

Thanks in advance.

I'm trying to print the page in landscape format through javascript. I've found some solutions at Landscape printing from HTML, but those don't fit my need.

The CSS snippet @media print{@page {size: landscape}} works fine, but I'm not sure how to make it work from javascript/jquery. The reason I'm trying to do this through javascript is because I want 2 buttons for printing. One normal print button which will print the content like it's displayed, and a second button which changes the page a bit and prints it landscape mode.

So in short: I want to change the page orientation (or size as it's called in CSS) to landscape in javascript but the javascript rotation won't do because it also rotates the text on the page. Is there a way to achieve what I'm trying to do without making a separate page using a different layout/CSS?

Thanks in advance.

• javascript
• jquery
• css
• printing

Share Improve this question Follow edited May 23, 2017 at 12:27 CommunityBot 111 silver badge asked Sep 28, 2012 at 14:56 IliansIlians 74377 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You can move that rule on another stylesheet and add it dynamically on click:

$("#printLandscape").on('click',function () {
    $('head').append('<link href="printLandscape.css" title="printLandscape" rel="stylesheet" />');
});

I've supposed that your "print in landscape mode" button has a printLandscape id.

Now, to be sure that the user will be able to print in normal mode even after the button is clicked the first time, you can add another listener to the "print in normal mode" button:

$("#printNormal").on('click',function () {
    $('link[title="printLandscape"]').attr('disabled', 'disabled').remove();
});

To do this, you must set a title to the landscape stylesheet (in this case i called it printLandscape)