时间戳

首页 > 解决方案 > @media print 在作用域样式标签内不起作用

html - @media print 在作用域样式标签内不起作用

问题描述

我正在构建一个 Nuxt 应用程序，不知道为什么这仅在作用域样式标签中不起作用。

这是我通常为风格所做的。

索引.vue

...some code..
<script>
some code here 
</script> 
<style scoped>
.text1 {
overflow: auto;
}
</style>

上面的代码没有问题。

我想做的是在 dialog 中打印东西。

详细地说，我有一个带有长文本的页面（如果打印大约 3 页）和打开对话框的按钮。

在对话框内部，有一些图像和文本以及打印按钮。

当我单击按钮时，我想在对话框中打印东西，但没有别的。

这就是我所做的：

<template>
...some text that I don't want to print..
<v-dialog>
 <v-container id="printable">
  image and text to print
 </v-container>
</v-dialog>
...
</template>
<script lang="ts">
export default Vue.extend({
methods: {
 print() {
      const modal = document.getElementById('printable');
      const cloned = modal!.cloneNode(true);
      let section = document.getElementById('print');

      if (!section) {
        section = document.createElement('div');
        section.id = 'print';
        document.body.appendChild(section);
      }

      section.innerHTML = '';
      section.appendChild(cloned);
      window.print();
    },
  },
})
</script>
<style scoped>
@media screen {
  #print {
    display: none;
  }
}

@media print {
  body * {
    visibility: hidden;
  }
  #print,
  #print * {
    visibility: visible;
  }
  #print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.text1 {
  overflow: auto;
}
</style>

当我单击打印按钮时，我得到了 3 页应该是不可见的文本。模态中的任何图像和文本也消失了。

现在，如果我改变 <script scoped>一切<script> 都按预期工作。但我不明白为什么..（如果可能的话，我想使用范围，因为它是推荐的）

此外，即使<script> 我仍然得到 3 页（第一页是模态的东西，然后是第二和第三页的空白页）

有谁知道如何删除第 2 和第 3 页？

标签： htmlcssvue.jsnuxt.js

解决方案

对于第一部分，您可能需要一些深度选择器，因为我猜您的目标是嵌套组件v-dialog，您可以在此处查看如何编写它：https ://stackoverflow.com/a/55368933/8816585

像这样包装

>>> .text1 {
  overflow: auto;
}

至于它正在打印但不应该打印的事实，它可能来自您单击按钮时的实际状态。附加代码在这里可能有用。

不确定它是否有帮助，但像html2canvas这样的包也可能有帮助。
这是我曾经使用这个包看到的一些问题，可能还有更多。
它们可能更适合打印到 Vue 环境中。

推荐阅读