Issue encountered with the style parameter in print-js when attempting to print from a Vue.js component

While browsing the print-js documentation, I came across a feature that allows us to pass style as a string to the printJS function. However, when attempting to apply this style, I encountered an error preventing the print action:

The error I'm facing is: 

ReferenceError: Can't find variable: style

In my Vue component, I am passing the style to printJS like so:

        printSlip: function(){
            printJS('printSlip', 'html', style="display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;");
        },
javascriptvue.jsvuejs2printjs

Answer №1

When utilizing the style parameter, it is crucial to employ the object syntax as Husan Ibrahim pointed out. However, what was overlooked is that the style parameter requires you to specify where the style should be implemented.

If you pass 

display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top;
, the browser will not know which elements should receive the styling.

For instance, if you intend for the style to be applied to the body, a valid approach would be 

body { display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top; }

Below is an example of passing styles to be applied to my-element1 and my-element2:

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

Take a look at this live demo featuring custom styles: https://codesandbox.io/s/x72j429vr4

Answer №2

The documentation mentions the ability to pass an object as an argument for configuring options.

When using Print.js, you have the option to provide an object as an argument to customize various settings.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting Custom Data Arrays to JSON using JavaScript

My goal was to create a utility function that can convert custom data (the type of data Sencha Touch stores use) into JSON format. I've made progress, but the function fails when dealing with complex data from the Twitter API, although it works fine w ...

javascriptjson

Embed your JavaScript code within the header tags of the WooCommerce order confirmation page

Seeking to enhance my thank you page with Google tracking script, I have developed code that successfully injects the tracker within the of the page, incorporating dynamic values. However, my goal is to embed it within the tags instead. function mv_goog ...

javascriptphpwordpresswoocommerceorders

What is limiting me from utilizing the entire Google Calendar feed?

I currently have a public Google Calendar set up. My goal is to retrieve appointment data in JSON format from this calendar. When I utilize the following URL https://www.google.com/calendar/feeds/{calendar_id}%40group.calendar.google.com/public/basic?alt ...

javascriptjsongoogle-apigoogle-calendar-api

Determine how to use both the "if" and "else if" statements in

/html code/ There are 4 textboxes on this page for entering minimum and maximum budget and area values. The condition set is that the maximum value should be greater than the minimum value for both budget and area. This condition is checked when the form i ...

javascriptphphtml

Display or conceal the nearest element that was clicked

http://jsfiddle.net/KevinOrin/xycCx/1/ jQuery('.happening-main-text .readmore').click(function() { jQuery('.divmore').toggle('slow'); return false; }); ...

javascriptjqueryhtml

Make TypeScript parameter optional if it is not supplied

I am working with an interface that defines scenes and their parameters: export interface IScene<R extends string> { path: R; params?: SceneParams; } The SceneParams interface looks like this: export interface SceneParams { [key: string]: s ...

javascripttypescripttypes

Tips on saving checklist values as an array within an object using AngularJS

I need help with storing selected checklist items as an array in a separate object. I want to only store the names of the checklist items, but I am struggling to figure out how to achieve this. Below is the HTML code: <div ng-app="editorApp" ng-contro ...

javascriptarraysangularjs

What is the best way to determine the number of dimensions in a JavaScript array?

Take a look at this array and its corresponding expected output: In Javascript, is it possible to dynamically determine how many levels there are in the array ary? var ary = ["a","b",["c","d"],"e",["f","g",["h","i"],"j"]]; Output: 3 var ary = ["a","b",[" ...

javascriptarrays

What are some practical applications for using the argument in a Vue.js directive?

Seeking clarification on the practical applications of using Vue.js directives arg and modifiers. While data can be passed as an object in the value field of a directive, I'm struggling to grasp the necessity of utilizing arg and modifiers. For insta ...

vue.js

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

javascripthtmlcssjointjs

Warning in Next.js: Each element in a list requires a distinct "key" property

Currently, I am in the process of building an e-commerce platform using Nextjs. My current focus is on enhancing the functionality of the myCart page, which serves as a dashboard for displaying the list of items that have been ordered. Below is the code s ...

javascriptnode.jsnext.js

How to extract cookie value in a node.js application using socket.io

How can I retrieve cookie values in a node server using socket.io? Whenever a socket sends a message to the server, I need to check the value of the cookie. However, I only want to obtain the cookie value and not the session cookie as done in Express. r ...

javascriptnode.jssocketscookies

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

javascriptjqueryhtmlcss

Accessing the background page of a Chrome extension while it's in operation

I am in the process of developing my first chrome extension that allows youtube.com/tv to run in the background so it can be accessed easily on a phone or tablet. Everything is working fine, except for the fact that if I want to watch the video and not j ...

javascripthtmljsongoogle-chrome-extensionmanifest

Issue encountered while attempting to deactivate button until numerical data is entered in the OTP field using Vuejs

otp_value: '', isFadeout: false, verifyOtp() { this.disabled = true; this.otpBtnClicked = false; this.verified = true; }, <input class="o ...

javascriptvue.js

Why aren't the divs appearing on the page?

I have developed a JavaScript and PHP page where the script in the PHP page sends data to my SQL database. However, the result is not displayed on my home page. Here is the code snippet: function getVote(question_ID) { var option_ID = document.queryS ...

javascriptphphtml

Conditionally rendering items in a v-for loop using Laravel and Vue.js

I'm struggling with implementing conditional rendering within v-for in laravel vue js. According to the documentation, using v-for and v-if together is not recommended. I would appreciate any assistance, thank you in advance! This is what the flow lo ...

laravelvue.js

Analyzing the elements of an array in JavaScript and making modifications to it based on their values

Looking for a Solution Current Data- id price 1001 200 1001 150 1002 300 1003 50 1002 70 1004 30 Desired Outcome id price 1001 350 1002 370 1003 ...

javascriptarraysangular

Difficulty in detecting state changes without refreshing the component when using Redux and React

I'm encountering difficulties detecting state changes from my Redux reducer in a React application. When I modify the state within one component, the other component in the app does not get the update unless the component is reloaded or refreshed. Let ...

javascriptreactjsredux

Which of the two async functions will be executed first?

const [counter, setCounter] = useState(0) Consider the scenario where we have two asynchronous functions, func1 and func2, both of which are responsible for updating the counter state. It is specified that func1 is supposed to execute before func2. async ...

javascriptnode.jsreactjs