Print.js: Print in orientation landscape

[edyrkaj]

Using these options is not possible to print in orientation landscape.
printable: 'print-section',
type: 'html',
targetStyles: ['*']
even that placed css attributes for page like:
@page {
size: A4 landscape;
}
.print-section {
width: 900px;
}

[kenanyildiz]

@edyrkaj I have same issues, there is no way to do that. Problem is when you try to print on Landscape it try to print a little bit big. If you try to print on Portrait it try to print small. Not fluid in page width. @crabbly ?

[edyrkaj]

hi @kenanyildiz, Ruefully I solved by using old way with window.print and avoided printJS.

[kenanyildiz]

Hi @edyrkaj thanks for info. How do you do that? Because when i try to do that by using old way browser block pop-up. How to handle that?

[crabbly]

Hey guys, you have to pass your stylesheets to the printJS function, using the css property. Otherwise, you can just pass the page orientation directly using the style property.

printJS({
  printable: 'print-element',
  type: 'html',
  style: '@page { size: Letter landscape; }'
})

Here is a working fiddle:

https://jsfiddle.net/crabbly/Lvktrb5n/

[kenanyildiz]

I already pass style attribute for sizing. Page size auto i gived. Now, i try your solution it does not work. Mobile first.. can you try your demo on mobile? Please re-open the issue.

[crabbly]

Looks like there is an issue using jsfiddle on mobile. If you create a codesandbox or replicate the issue on another sandbox where I can test the page orientation on mobile, I will reopen the issue. Otherwise, page orientation is being passed to the print job. I don't think this is an issue with the library. Will keep this closed for now.

[kenanyildiz]

Okay, you can see on http://www.istifaet.org fill the form and print automatically will trigger. (Mobile)

[crabbly]

As you see, the library is passing the page orientation to your print job (confirmed when printing from a desktop). Therefore, not a library issue.

However, I confirmed that using the @page css query isn't being respected on mobile. Wrap it inside a @print query and give it a try.

Ex.:

@media print {
    @page {
        size: landscape
    }
}

If that doesn't work, search the web for help as this seem related to CSS and not JS. If you can, post any updates here to help anybody else with the same issue. Thank you.

[xydiva]

I got the same doubt with the print content width. It's not adaptive when I change the page orientation. Then I found the maxWidth defaults to 800 in the documentation.
Just set it to auto and try it.

printJS({
    printable: 'print',
    type: 'html',
    maxWidth: 'auto'
})

[crabbly]

The default value for maxWidth was supposed to make print jobs more "printer friendly" out of the box. However, I think we should just remove that. We can use the style property or css to pass in any desired style. Including "printer friendly" settings.