以下是实现 @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>
实现原理说明：
-
命名页面绑定：
css
.print-scope {page: report-page; /* 将元素绑定到特定页面 */ }-
通过
page属性将打印容器与特定页面名称关联
-
-
限定作用域的页面规则：
css
@page report-page { /* 仅影响绑定了report-page的元素 */ }-
只有应用了
page: report-page的元素才会使用这个页面样式
-
-
样式隔离保障：
-
使用唯一命名（如
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; /* 标准属性 */
}
最佳实践建议：
-
命名规范：
css
/* 推荐使用 [组件名]-page 格式 */ page: user-list-page;
-
动态样式注入（可选）：
javascript
// 在组件挂载时动态添加样式 onMounted(() => {const style = document.createElement('style')style.textContent = `@page unique-${Math.random().toString(36).substr(2, 9)} {/* 样式规则 */}`document.head.appendChild(style) }) -
样式优先级控制：
css
@page report-page {margin: 1cm !important; /* 确保覆盖浏览器默认 */ }
通过这种方案，不同组件的打印样式可以完全隔离，且无需担心全局污染问题。每个组件的 @page 规则都通过唯一的命名空间实现独立作用域。
