通过 CSS 的 命名页面（Named Pages） 技术实现作用域隔离，实现 @page 样式仅影响当前组件

以下是实现 @page 样式仅影响当前组件的完整解决方案，通过 CSS 的 命名页面（Named Pages） 技术实现作用域隔离：

vue

<template>
  <div>
    <button v-print="printOptions">打印当前报表</button>

    <!-- 打印容器（添加特定类名） -->
    <div id="printReport" class="print-scope">
      <!-- 页眉内容 -->
      <div class="report-header">...</div>
      
      <!-- 表格内容 -->
      <table class="report-table">...</table>

      <!-- 页脚内容 -->
      <div class="report-footer">...</div>
    </div>
  </div>
</template>

<script setup>
// 脚本部分保持不变
</script>

<style scoped>
/* 普通样式 */
.print-scope {
  display: none;
}
</style>

<style>
/* 打印专用样式（无scoped） */
@media print {
  /* 关键步骤1：定义命名页面 */
  .print-scope {
    page: report-page; /* 绑定页面名称 */
  }

  /* 关键步骤2：指定命名页面的样式 */
  @page report-page {
    size: A4;
    margin: 100px 20px 60px;
    
    /* 页码位置 */
    @top-right {
      content: "第 " counter(page) " 页/共 " counter(pages) " 页";
      font-size: 12px;
    }
  }

  /* 其他样式规则... */
}
</style>

实现原理说明：

1. 命名页面绑定：

   css

   .print-scope {
     page: report-page; /* 将元素绑定到特定页面 */
   }

   • 通过 page 属性将打印容器与特定页面名称关联

2. 限定作用域的页面规则：

   css

   @page report-page { /* 仅影响绑定了report-page的元素 */ }

   • 只有应用了 page: report-page 的元素才会使用这个页面样式

3. 样式隔离保障：

   • 使用唯一命名（如 report-page）

   • 其他组件使用不同的页面名称（如 sales-page）

多组件共存示例：

css

/* 组件A的样式 */
@media print {
  .component-a {
    page: component-a-page;
  }
  
  @page component-a-page {
    margin: 2cm;
  }
}

/* 组件B的样式 */
@media print {
  .component-b {
    page: component-b-page;
  }
  
  @page component-b-page {
    margin: 1cm;
  }
}

浏览器兼容性处理：

css

/* 添加浏览器前缀 */
@page report-page {
  -webkit-margin-before: 100px; /* Chrome/Safari */
  -moz-margin-top: 100px;       /* Firefox */
  margin-top: 100px;            /* 标准属性 */
}

最佳实践建议：

1. 命名规范：

   css

   /* 推荐使用 [组件名]-page 格式 */
   page: user-list-page;

2. 动态样式注入（可选）：

   javascript

   // 在组件挂载时动态添加样式
   onMounted(() => {
     const style = document.createElement('style')
     style.textContent = `
       @page unique-${Math.random().toString(36).substr(2, 9)} {
         /* 样式规则 */
       }
     `
     document.head.appendChild(style)
   })

3. 样式优先级控制：

   css

   @page report-page {
     margin: 1cm !important; /* 确保覆盖浏览器默认 */
   }

通过这种方案，不同组件的打印样式可以完全隔离，且无需担心全局污染问题。每个组件的 @page 规则都通过唯一的命名空间实现独立作用域。