CODEWITHSUNDEEP
javascripthtmlcsssvg
user1334589
user1334589

Reputation: 125

Use css to set page orientation when printing for different pages

I want to set the page orientation when printing multiple pages in one print action. So basically I have some SVG loaded into an iframe and I'm using the JavaScript window.print() function. I want the first page to print in portrait but the second page to print in landscape? I was looking at css media @print and @page but could not get it working, is it possible for different pages?

Here's some example code.

var page1 = "<svg height='90' width='200'><text x='10' y='20' style='fill:red;'>Several lines:<tspan x='10' y='45'>page 1</tspan><tspan x='10' y='70'>Second line.</tspan></text></svg>"
var page2 = "<svg height='90' width='200'><text x='10' y='20' style='fill:red;'>Several lines:<tspan x='10' y='45'>page 2</tspan><tspan x='10' y='70'>Second line.</tspan></text></svg>" 

var divider = "<div class='pagebreak'></div>";
var fullcontent = page1 + divider + page2;
var content = $('#printframe').contents();

$('#printframe').contents().find("head")
   .append($("<style type='text/css'> .pagebreak { page-break-before: always; } </style>"));

content.find('body').append(fullcontent);
window.frames["printframe"].focus();
window.frames["printframe"].print();

Upvotes: 0

Views: 705

Answers (1)

James King
James King

Reputation: 1917

I don't its possible. I've needed to do it before several times and the only solution i've found is to create a PDF for the user to download and then print. There are lots of plugins out there that will take your HTML page and turn it into a PDF and render all the CSS correctly

Upvotes: 0

Related Questions