打印不同页面时,使用css设置页面方向

时间:2014-02-26 22:42:45

标签: javascript html css svg

我想在一次打印操作中打印多个页面时设置页面方向。所以基本上我有一些SVG加载到iframe中,我正在使用JavaScript window.print()函数。我希望第一页以纵向打印,但第二页以横向打印?我正在查看css media @print和@page,但无法使其正常工作,是否可以使用不同的页面?

这是一些示例代码。

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();

1 个答案:

答案 0 :(得分:0)

我不可能。我需要在几次之前完成它,我发现的唯一解决方案是创建一个PDF供用户下载然后打印。有很多插件可以将您的HTML页面转换为PDF并正确呈现所有CSS