前端之家

  1. 首页
  2. 问答

我可以使用哪种css替代方法来支持不支持的margin-top：auto，使用mpdf在a4页面上模拟页脚？

• 问答

我正在尝试使用mpdf从primitive wyswyg到pdf生成1：1 a4页面。 因此，使用此CSS：

#editor {
  background-color: gray;
  border: 1px black;
  padding: 1em 2em;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
}

.content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  padding-left: 2cm;
  padding-bottom: 2cm;
  padding-top: 2cm;
  outline-color: white;
}

.header {
  background-color: red;
  text-align: center;
}

.footer {
  background-color: darkgray;
  margin-top: auto;
  height: 100px;
  page-break-after:right;
}

.brasao {
  height: 60px;
  width: 60px;
}

#template {
  display: none;
}

已在以下HTML + JS上应用：https://jsitor.com/FWvNJa7XN 如您所见，至少在Web浏览器上，使用div页脚上的 margin-top：auto ，我能够将页脚粘贴在每个页面的底部。

但是当我尝试使用mpdf编写时：

<?php

use Mpdf\Mpdf;
use Mpdf\Output\Destination;

include 'vendor' . DIRECTORY_SEPARATOR . 'autoload.php';

$mpdf = new Mpdf();

 //via JS as I able to send each page outerhtml separated on hidden values
$pages = $_REQUEST['pages'];

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8','format' => 'A4','margin_left' => 0,'margin_right' => 0,'margin_top' => 0,'margin_bottom' => 0,'margin_header' => 0,'margin_footer' => 0,'dpi' => 72
]);

$stylesheet = file_get_contents('redator.css');
$mpdf->WriteHTML($stylesheet,\Mpdf\HTMLParserMode::HEADER_CSS);
foreach ($pages as $page) {
    $mpdf->WriteHTML($page);
}
$mpdf->Output();

在Firefox上，渲染的是这个（包括编辑器div）： https://i.imgur.com/UJldBr9.png

但是，使用mpdf，结果不是预期的： https://www.docdroid.net/vP4QALq/mpdf.pdf

那么，如何尝试在mpdf上呈现1：1？

xz7474 回答：我可以使用哪种css替代方法来支持不支持的margin-top：auto，使用mpdf在a4页面上模拟页脚？

解决方案1： 您可以添加

.content{
  ...
  flex:auto;
  ...
}

并根据需要设置页眉和页脚的高度。

解决方案2：让页眉和页脚的高度分别为100px和高度

.footer {
...
position:absolute;
bottom:0;
height:100px;
...
}


   .header{
height:100px;
}

.content{
height:calc(100% - 200px);
}

.page{
position:relative;
}

解决方案3 只需根据需要在页眉，页脚和内容类中提供固定高度

,

我不知道此pdf库，但是您可以尝试：

.footer {
  background-color: darkgray;
  /* absolute position */
  position: absolute;
  /* stick to bottom */
  bottom: 0;
  /* give it full width */
  width: 100%;
  height: 100px;
  page-break-after:right;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
  /* make the header relative to your page element */
  position: relative;
}
,

您可以这样设置绝对值：

#editor {
 background-color: gray;
 border: 1px black;
 padding: 1em 2em;
 }

 .page {
 background-color: white;
 border-style: solid;
 border-color: black;
 border-width: 1px;
 /*padding: 10em 2em;*/
 width: 595px;
 height: 841px;
 display: flex;
 flex-direction: column;
}

.content {
 word-wrap: break-word;
 overflow-wrap: break-word;
 white-space: normal;
 padding-left: 2cm;
 padding-bottom: 2cm;
 padding-top: 2cm;
 outline-color: white;
 }

.header {
 background-color: red;
 text-align: center;

}

.footer {
 background-color: darkgray;
 position:absolute;
 width:595px;
 top:817px;
 height: 100px;
 page-break-after:right;

}

.brasao {
 height: 60px;
 width: 60px;
 }

 #template {
 display: none;
 }

这在浏览器中显示正常。

您还可以通过编程方式渲染它们。 请参阅此文档：https://mpdf.:github.io/headers-footers/method-4.html

有趣的是可以使用docs中描述的@page属性来尝试： https://mpdf.github.io/css-stylesheets/supported-css.html

@页面

设置“页面框”的大小，通常在整个文档中使用固定大小的表格，如CSS2 @paged媒体规范中所述。

我想应该是这样的：

 @page {
  //your CSS
 }
,

1）要使底部的固定页脚替换为css下方的css 

 #editor {
  background-color: gray;
  border: 1px black;
  padding: 1em 2em;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
  position:relative;
}

.content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  padding-left: 2cm;
  padding-bottom: 2cm;
  padding-top: 2cm;
  outline-color: white;
}

.header {
  background-color: red;
  text-align: center;
}

.footer {
  background-color: darkgray;
  margin-top: auto;
  height: 100px;
  page-break-after:right;
   width:inherit;
     position:absolute;
     bottom:0;
}

.brasao {
  height: 60px;
  width: 60px;
}

#template {
  display: none;
}

2）要生成A4页面，请尝试使用以下代码为我工作

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8','format' => 'A4'

]);
,

在普通CSS 中，您将设置页脚的position: absolute;并将其放在底部。 而且，为了不隐藏任何东西，请在页面中添加与页脚高度相同的margin-bottom。

.page {
  position: relative;
  margin-bottom: 100px;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  heigth: 100px;
}
,

您需要编辑两个CSS类Workbook wb = new Workbook(dataDir + "Book1.xlsm"); X509Certificate2 cert = new X509Certificate2("SampleCert.pfx","1234"); DigitalSignature ds = new DigitalSignature(cert,"Signing Digital Signature using Aspose.Cells",DateTime.Now); wb.VbaProject.Sign(ds); wb.Save("DigitallySigned_out.xlsm"); 和.page。只需在您的班级中添加这些规则即可。

.footer
contenteditablecsshtmlmpdfphp
本文链接：https://www.f2er.com/3021244.html

大家都在问