自定义浏览器页眉页脚

自定义浏览器预览页眉页脚

在vue项目中，有打印功能，主流浏览器都有预览功能，我们项目需求不开启浏览器默认的页眉页脚功能，但是需要展示页眉页脚，所以才会自定义页眉页脚。

具体代码

.pageStyle{page-break-after:always;/* 强制手动分页样式 */}@page{@top-center{content:"我的页眉内容";/*设置页眉内容*/font-size:10pt;/*字体大小*/}@bottom-center{content:"Page "counter(page);/* 设置页脚内容，包含页码 */font-size:10pt;/*字体大小*/text-align:right;/*文本内容居右*/}}

由于我自己的项目是前期已经写好的，这是后续新添加的功能，所以我只用了以上代码片段。但如果要更完善、更完美，可以尝试添加以下代码：

@page{margin:0;/* 去除所有页边距，包括页眉页脚的空间 */size:auto;/* 根据内容自动调整页面大小 */}@mediaprint{header, footer{display:none!important;}/* 确保页眉页脚元素被隐藏 */body{margin:0!important;}/* 去除 body 的页边距 */}@page{@top-center{content:"我的页眉内容";/* 设置页眉内容 */font-size:10pt;/*字体大小*/}@bottom-center{content:"Page "counter(page);/* 设置页脚内容，包含页码 */font-size:10pt;/*字体大小*/}}

具体情况可以按照自己的项目去更改。目前这种方法只适用于Edge浏览器，谷歌浏览器暂不支持。

效果图