Параметр стиля не работает для print-js при попытке печати из компонента vuejs

Question

Я прочитал это в документации print-js , что мы можем передать стиль как строку в функцию printJS, так что стиль, который мы передаем, применяется, но я получаю ошибку, которая не являетсяразрешение печати:

Я получаю эту ошибку: ReferenceError: Can't find variable: style

Я передаю стиль для printJS в компоненте vue, как этот

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

Answer 1

Как уже ответил Хусан Ибрагим, чтобы использовать параметр style, необходимо использовать синтаксис объекта.Что упустил Хусан, так это то, что параметр style ожидает, что вы нацелитесь туда, где должен применяться стиль.

При передаче display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top; браузер не будет знать, какие элементы применить стиль.

Допустим, вы хотите применить его к телу, это будет действительным body { display: inline-block; text-align: center; padding: 30px; margin: 15px; text-align: center; padding: 15px; vertical-align: top; }

Ниже приведен пример передачи стилей, применяемых в my-element1 и my-element2:

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

Пример передачи в произвольном стиле: https://codesandbox.io/s/x72j429vr4

Answer 2

В документации указано, что вы можете передать объект в качестве аргумента для настройки параметров.

Print.js примет объект в качестве аргумента, где вы можете настроить некоторые параметры

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