Question

我正在尝试使用DOMpdf创建pdf。以下脚本是我试图创建pdf的，当我得到pdf时，它看起来像我在下面发布的图像:(请检查）

现在我的问题是每个页面都显示标题，我的内容文本正在通过页脚部分。我只想在第一页中有标题，页面号在每页的页脚位置。我差不多24小时搞砸了它但仍然无法实现它。

请您帮我解决这个问题吗？

先谢谢

 <html>
 <head>

 <style>
    @page {
   size: auto;   /* auto is the initial value */
   margin: 10%;
 }

#header { position: fixed; left: 0px; top: -100px; right: 0px; height: 120px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: white; }
#footer .page:after { content: counter(page, upper-roman); }
#content{height:600px;}

</style>

 <body>

 <div id=\"header\">
 <h1>Widgets Express</h1>
</div>
 <div id=\"footer\">
<p class=\"page\">Page </p>
 </div>


<div id=\"content\">


<table style=\"table-layout:fixed;width:600px;\">
<tr height=\"30\">
<td width=\"150\">CSS table layout cell 1</td>
<td width=\"200\">CSS table layout cell 2</td>
<td width=\"250\">CSS table layout cell 3</td>

 </tr>


 </table>


 <p style=\"page-break-before: always;\">the second page</p>
 </div>
</body>
</html>

enter image description here

Answer 1

这种情况正在发生，因为您使用“position：fixed”作为页眉和页脚

Answer 2

对于标题，请使用：

#header { position: absolute; left: 0; top: 0; right: 0; height: 120px; }
body { padding-top: 120px; }

关于分页，我不太确定这是否可以在css这样做直截了当。

编辑：

更改页眉和页脚脚本将起作用：

#header { position: absolute; left: 0; top: -100px; right: 0; height: 100px;background-color: orange; text-align: center;  }

 #footer {position: fixed ; left: 0px; bottom: -110px; right: 0px; height: 40px; background-color: orange; }

标题显示在每个页面中

2 个答案: