如何在 vue.js 中使用 @page css 规则答案

【问题标题】：How to use the @page css rule with vue.js如何在 vue.js 中使用 @page css 规则
【发布时间】：2021-01-17 12:20:43
【问题描述】：

我有一个页面，我想像这样以横向模式打印：

@page {
    margin: 0;
    size: A4 landscape;
}

但是，由于我所有文件的所有样式部分都捆绑在一起，因此这种样式会影响我应用中的每个页面。

通常，我会为我的组件分配一个唯一的 id，并使用它来更有选择地应用样式：

@page {
    #my-unique-id{
        margin: 0;
        size: A4 landscape;
    }
}

但这无效，因为@page 规则不能有任何进一步的选择器（合乎逻辑，因为它应该影响整个页面并且不能被定位）。

我怎样才能让这条规则只影响当前加载的页面，而我的所有其他页面都处于纵向模式？

【问题讨论】：

【解决方案1】：

<style> 标签可以在 HTML 文档中的任何位置。因此，作为一种解决方法，您可以在 <template> 中添加一个 <style> 标签，如下所示：

<template>
  <div>
    <style>
      @page {
        margin: 0;
        size: A4 landscape;
      }
    </style>
    ...
  </div>
</template>

它可能不是最干净的解决方案，但它可以完成工作并且只在这一页上应用您的@page 规则。

【讨论】：