自定义浏览器页眉页脚

自定义浏览器预览页眉页脚在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浏览器谷歌浏览器暂不支持。效果图