通过 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 规则都通过唯一的命名空间实现独立作用域。