Print.js: Could add css style when printing?

[thearabbit]

I base on Vue

<template>
   <div>
      <div class="myclass">My Data.....</div>
   </div>
</template>
<style lang="scss" scoped>
   .myclass {
      color: red;
   }
</style>

But don't work when printing.

[crabbly]

@thearabbit Hey Yuom, have you tried passing the param honorColor as true?

For example, if you are trying to print the div element with id printJS-form:

<template>
   <div id="printJS-form">
      <div class="myclass">My Data.....</div>
   </div>
</template>
<style lang="scss" scoped>
   .myclass {
      color: red;
   }
</style>

Then:

printJS({ printable: 'printJS-form', type: 'html', honorColor: true })

[thearabbit]

Thanks for your reply.
This is my example color css, but I would like to pass the other css style?

.my-class{
  font..
  border
  color
  ...
}

It suport css string like printd?

[crabbly]

Yuom, there is a recent commit adding parameters where you can tell the lib to process all styles applied to your html elements.
https://github.com/crabbly/Print.js/commit/5ed39836dd69f4054a64e6fefc6278113651ed05

I haven't yet added it to the documentation, but the changes are already published in npm.

[crabbly]

Btw, this still doesn't support css media queries. However, I'm planning on adding support for it soon.

[mugar]

thank you @crabbly for the new options of targetStyles, it is working as expected. Now I can control the styling and make it look as desired. Great Job.

[thearabbit]

@mugar, How to use targetStyles.
I can't find in docs

[mugar]

you add the name of the styles properties you want to be kept during printing, like showcased in the snippet below.

printJS({printable: 'print-container',
type:'html',
maxWidth: 350,
honorColor: true,
targetStyles: ['margin','font-size','text-align','font-weight','border']
})

[thearabbit]

thanks for your reply, but don't understand how to pass style value

[mugar]

define first your styling like
<style lang="scss" scoped> .myclass { color: red; font-size: 15px; margin: 10px auto; } </style>

and in the javascript file, add in the printJS options the targetStyles property which is an array listing all the names of the css properties you have used. for the css sample above it would be like this
printJS({printable: 'elementID', type:'html', targetStyles: ['color','font-size','margin'] })
so whatever css property that is not in that list of targetStyles will be ignored by printJS, but any property included in the array will be kept and used in the generation of the printable pdf.

[crabbly]

@thearabbit Hey Yuom, as Mugabo explained above, you can tell the library which styles should be processed when printing any HTML element, however, the element should already have those styles applied to it.

For example, a HTML element with ID testElement and style class my-class:

<div id="testElement" class="my-class">
    <h1> Test Print </h1>
</div>

In your stylesheet:

.my-class { 
    color: red;
    font-size: 15px;
    margin: 10px auto;
    padding: 5px;
}

Then in your Javascript:

printJS({
    printable: 'testElement',
    type:'html',
    targetStyles: [
        'color',
        'font-size',
        'margin',
        'padding'
    ]
})

I haven't yet added the targetStyles option to the documentation, but I hope this explains how to use it.

[thearabbit]

So it mean that we must input all style that we use into Array of targetStlyles.
I thinks that it is not good, if we have many style.
Excuse me, Why you don't use cssText, or any cssObject such as Printd

[crabbly]

You can pass [*] for all styles.

[crabbly]

The documentation was updated with targetStyle and targetStyles params.
http://printjs.crabbly.com/#configuration

@thearabbit Yuom, have you tried using it yet?

[thearabbit]

Thanks again, I will try soon

[sanfx]

["*"] worked for me but not targetStyles: ['color','font-size','margin'], now the problem is it is getting applied to all the html tags not just the one html tag that has class specified.

[crabbly]

@sanfx Correct, it will process all the HTML being printed.
To better manipulate the print style, I recommend disabling the style processing on the library by passing scanStyles: false, and to use the css and style properties instead.
http://printjs.crabbly.com/#configuration