Print.js: how to show css with html?

[zhuyinjing]

hi,i use
<script type="text/javascript" src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

printJS({
        printable: 'canvas',
        type: 'html',
           showModal: true,
         })

and the pdf like the photo...
it doesn't show css with li or background color,float and so on..
how can i do , can show the css stylesheet??

[crabbly]

Try this:

printJS({
  printable: 'canvas',
  type: 'html',
  showModal: true,
  targetStyles: ['*']
})

[zhuyinjing]

@crabbly ok thanks..
and i try add targetStyles: ['*']
it shows nothing in pdf

my html code is:

<el-container id="canvas" style="height:calc(100% - 62px);margin-top:2px">
    <el-aside v-show="$store.state.menuShow" width="350px;" style="width:300px;height:100%;border-right:1px solid #e6e6e6">
      <leftMenu style="margin-top:5px"></leftMenu>
    </el-aside>
    <el-main>

if i set id=canvas with leftMenu it works, but i set id with el-container it shows nothing with pdf.
what's wrong with my code?
thanks a lot!

[crabbly]

Hey @zhuyinjing , I believe the issue is because you are using calc to calculate the el-container height. When we print, the library will duplicate this html inside an iframe, and the container height maybe recalculating there, with a unwanted value.
Honestly, this is just a guess. Try setting a fixed height for el-container and give it a try.
If that fixes the issue, a solution / option would be to wrap the el-container with div or another element and set the style with the calculated height there. Then when printing el-container, the height has already been calculated.

Also, I recommend the use of CSS classes for your HTML styling. It will make your code cleaner and more organized.

[zhuyinjing]

thanks a lot ,i will use css class!
by the way, i found it doesn't work with canvas tag?? it print nothing...

[crabbly]

That's correct. The library currently doesn't support canvas. Refer to issue #181

[zhuyinjing]

all right..
thanks a lot!

[crabbly]

The library does now support canvas and other previously unsupported html elements.
Please run npm update print-js to get its latest version.
Feel free to reopen this if any issues.
Thank you!