CODEWITHSUNDEEP
javascriptvue.jsvuejs2printjs
Ciasto piekarz
Ciasto piekarz

Reputation: 8277

style parameter not working for print-js when trying to print from vuejs component

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;");
        },

Upvotes: 1

Views: 4050

Answers (2)

crabbly
crabbly

Reputation: 5186

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

Upvotes: 4

Husam Elbashir
Husam Elbashir

Reputation: 7187

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;'});
},

Upvotes: 1

Related Questions