How to set different print page css to components?

I want to print one component horizontally, so I define it like this:

<div>
landscape
</div>

<style scoped>
@media print {@page { size: landscape; }}
</style>

The problem when doing this is the rest components are also being horizontally printed. Seems scoped doesn’t work with media stuff. This is not what I want. I’d like only one component to be landscape printing. How should I do?

this has nothing to do with scoped scss.

The media query you use is defined to always mean the full page - that’s what its meant to do.

You can’t put individual elements on a page into “landscape” mode, that’s only possible for pages.

So you will have to change the dimentions of the element manually to those that fit your needs.

<div class="orientation">
landscape
</div>

<style scoped>
. orientation {
  width: 400px /* normal width */
}
@media print {
  .ortientation {
    width: 100% /* print width */
  }
}
</style>

…something like that.

I mean, when I use @media print { @page { size: landscape; } }, and press ctrl+p in browser, the print preview will like this(horizontal A4) and I want only one route page of my vue project printing preview like this:


But actually this lead to all my route pages to be printed horizontally.

When not using this css, the preview goes like(normal A4):


this is what the rest pages preview should be. But obviously this lead to all pages to be printed vertically.

请问下 你这个printJs样式是怎么出来的 我写的样式无效 是错乱的

您好,我现在也有同样的需求想纸张横向打印,但设置@media print { @page { size: landscape; } }后仍然是纸张纵向如你上传的第二张图一样,想问一下这个@media print { @page { size: landscape; } }是写在哪里的css?是加入在app.vue的css里面吗?