Css 如何将页眉和页脚添加到html内容I'；我从移动Safari打印？
我的任务是将html打印成报告。我需要在报告中的每一页添加页眉和页脚 我一直在使用这里介绍的技术：让这些页眉和页脚出现在Firefox、Chrome和IE11中 不幸的是，当我在iOS上打印MobileSafari的页面时，我也需要它们出现，但它们没有 是否有人拥有将页眉/页脚添加到mobile safari打印输出的每页的实用技术？报告的内容（例如表格）将跨越多个页面Css 如何将页眉和页脚添加到html内容I'；我从移动Safari打印？,css,mobile-safari,css-print,Css,Mobile Safari,Css Print,我的任务是将html打印成报告。我需要在报告中的每一页添加页眉和页脚 我一直在使用这里介绍的技术：让这些页眉和页脚出现在Firefox、Chrome和IE11中 不幸的是，当我在iOS上打印MobileSafari的页面时，我也需要它们出现，但它们没有 是否有人拥有将页眉/页脚添加到mobile safari打印输出的每页的实用技术？报告的内容（例如表格）将跨越多个页面 （我不希望在服务器端将报告呈现为PDF）我认为您可以使用npm-I html PDF，它具有页眉和页脚的配置 检查是否有帮助。
（我不希望在服务器端将报告呈现为PDF）我认为您可以使用
npm-I html PDF检查是否有帮助。这是我尝试的HTML代码，您可以定义自定义页眉和页脚文本，这些文本将显示在所有页面上（如果此HTML页面有多个页面），并且我已将其隐藏在浏览器上，但在打印时可见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@media screen {
.noPrint {
}
.noScreen {
display: none;
}
}
@media print {
.noPrint {
display: none;
}
.noScreen {
}
}
#header {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
right: 0;
}
body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
padding-top: 50px;
}
</style>
</head>
<body>
<div id="header" class="noScreen">
<h2>Header Content</h2>
</div>
<div id="footer" class="noScreen">
<h2>Footer Content</h2>
</div>
<!--Multiple page of contents-->
</body>
</html>
@媒体屏幕{
.不打印{
}
.noScreen{
显示：无；
}
}
@媒体印刷品{
.不打印{
显示：无；
}
.noScreen{
}
}
#标题{
位置：固定；
宽度：100%；
排名：0；
左：0；
右：0；
}
#页脚{
位置：固定；
宽度：100%；
底部：0；
左：0；
右：0；
}
身体{
字体：佐治亚州12号，“新罗马时代”，泰晤士报，衬线；
线高：1.3；
填充顶部：50px；
}
标题内容
页脚内容
快乐编码…WebKit中有一个bug，这使得它目前在Safari中不实用。这里是这个问题的链接
我需要能够通过单击加载和打印文档。这在打印HTML时很容易做到，但我还没有看到用于PDF的跨平台解决方案。所以这个问题说明我正在寻找一个纯HTML的解决方案。如果没有，那我就没问题了。你可以试试Bootstrap或bulma css库，也许，这与我在问题中使用的技术类似，但在从mobile Safari打印时不起作用。