Медиа-печать не принимает стили - PullRequest
Новая
       8

Медиа-печать не принимает стили

2 голосов
/ 08 января 2020

Я использую плагин HTML-to-paper для печати своего контента на принтере, но проблема, с которой я сталкиваюсь, заключается в том, что он не использует какой-либо стиль, который я определяю для @media print

Проблемы, с которыми я сталкиваюсь

  • Изначально я скрываю одну из своих колонок и хочу, чтобы печать не печаталась, а печатается
  • При печати я хочу удалить поля ввода из таблицы, но это также не делает это

В основном это не принимает никакого стиля, который я даю на @media print

Использование подключения

In main. js Я делаю это 

    import VueHtmlToPaper from "vue-html-to-paper";


    const options = {
      name: '_blank',
      specs: [
        'fullscreen=yes',
        'titlebar=yes',
        'scrollbars=yes'
      ],
      styles: [
        'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
        'https://unpkg.com/kidlat-css/css/kidlat.css'
      ]
    }
Vue.use(VueHtmlToPaper,options);

Я не знаю, почему этот плагин не принимает css на носителе для печати

Это плагин Github .

Это рабочий код .

Я просто хочу знать, почему этот плагин не поддерживает печать с носителя, или я что-то не так делаю?

1 Ответ

1 голос
/ 08 января 2020

Причина, по которой запрос @media print css не работает, поскольку VueHtmlToPaper использует window.open API для открытия нового окна с заданными параметрами. И по вашему выбору я вижу две таблицы стилей в настоящее время 

styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://unpkg.com/kidlat-css/css/kidlat.css'
  ]

Следовательно, ваш стиль печати мультимедиа 

@media print {
  input {
    display: none;
  }
}

не будет работать, поскольку он не существует в новом окне.

Чтобы включить ваш стиль, вы можете разместить ваши стили @media print в отдельном файле .css, а затем добавить его к опции стилей 

styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    'https://unpkg.com/kidlat-css/css/kidlat.css',
    'https://myhostip/css/print.css'// like this
  ]
...