How to print pages in mix mode portrait & landscape

Question

I have an angular component which is used for UI rendering and printing. I am using window.print command for the same. I need initial 2 pages in landscape mode and after page break,1 page in portrait mode.

I have tried to set orientation as landscape/portrait in corresponding div and also text-rotation solution. But nothing worked. Any other way to achieve the same? Thanks in advance.

Answer 1

Have you tried CSS property page ? This property is used to specify a particular type of named page.

Reference: https://www.w3.org/TR/css-page-3/#propdef-page

As the CSS below, you can add the landscape-page or the portrait-page class to the element you mean to display in landscape or portrait mode.

@page orientation-portrait {
    size: portrait;
}

@page orientation-landscape {
    size: landscape;
}

.landscape-page {
    page: orientation-landscape;
}

.portrait-page {
    page: orientation-portrait;
}

Unfortunately, this property works well in Google Chrome but not Firefox and Safari...