可以通过以下步骤实现:
@media print
媒体查询来定义打印样式。在组件的<style>
标签中添加以下代码:<style>
@media print {
/* 定义打印样式 */
@page {
/* 设置页眉 */
margin-top: 20mm;
margin-bottom: 10mm;
@top-center {
content: "这里是静态页眉";
}
}
}
</style>
<template>
<div>
<!-- 其他页面内容 -->
<button @click="printPage">打印</button>
</div>
</template>
printPage
,使用window.print()
方法触发打印:<script>
export default {
methods: {
printPage() {
window.print();
}
}
}
</script>
这样,在使用Chrome浏览器打开该页面后,点击打印按钮时,每个打印页都会包含静态页眉。
领取专属 10元无门槛券
手把手带您无忧上云