1

I read it on print-js documentation that we can pass style as a string to printJS function, so that style we pass in gets applied, but I a landing to an error that is not allowing the print to happen:

I am getting this error: ReferenceError: Can't find variable: style

I am passing the style to printJS in vue component like this

        printSlip: function(){
            printJS('printSlip', 'html', style="display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;");
        },
Ciasto piekarz
  • 7,853
  • 18
  • 101
  • 197

2 Answers2

4

As Husan Ibrahim already answered, to use the style parameter, you need to use the object syntax. What Husan missed, is that the style parameter is expecting you to target where the style should be applied.

When passing display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;, the browser won't know which elements to apply the style.

Let's say you want to apply it to the body, this would be valid body { display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top; }

Here is an example passing styles to be applied in my-element1 and my-element2:

printSlip() {
    printJS({
        printable: 'printSlip', 
        type: 'html', 
        style: '#my-element1 { color: blue; } #my-element2 { color: red; }'
    })
}

Live example passing custom style: https://codesandbox.io/s/x72j429vr4

crabbly
  • 5,106
  • 1
  • 23
  • 46
1

Says in the docs that you can pass an object as argument to configure options ..

Print.js will accept an object as argument, where you can configure some options

printSlip: function(){
    printJS({printable: 'printSlip', type: 'html', style: 'display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;'});
},
Husam Ibrahim
  • 6,999
  • 3
  • 16
  • 28
  • it did not work for me, though I did not get any error, I am now thinking I am passing the style parameters but to what html tag they will get applied ? – Ciasto piekarz Dec 23 '18 at 11:31