媒体印刷品不占风格

Question

我正在使用HTML-to-paper 插件在打印机上打印我的内容，但我面临的问题是它没有采用我在@media print 上定义的任何样式

我面临的问题

• 最初我隐藏了我的一个专栏，并且还希望它不在打印时打印，但它正在打印
• 在打印时，我想从表中删除输入字段，但它也没有这样做

基本上它没有采用我在@media print 上提供的任何样式

插电使用

在 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

This is the plugin Github.

This is the working code.

我只是想知道为什么这个插件不支持媒体打印，或者我做错了什么？

Answer 1

@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
  ]