html - dompdf 行高与源不同

标签 html css dompdf

我正在尝试使用 dompdf v0.6.1-4 创建一个 pdf。但是，我在创建 pdf 时遇到了以下怪事。表格中的 dompdf 似乎完全忽略了行高。每行都有 100 像素的高度。这不是我想要的样子。

这是html

<!doctype HTML>
<head>
	<title>
	voucher pdf
	</title>
	<style>

#wrapper{
	width: 800px;
	background-color: white;
}

#vouchercode{
	font-weight: bolder;
}

#customerlogo img{
	width: 400px;
	height: 285px;
}

#topleftimgdescr{
	text-align: center;
	vertical-align: center;
	font-weight: bold;
}

#maxwifihref{
	text-align: center;
}

#maxwifiimg img{
	width: 170px;
	height: 75px;
}

#nl{
	height: 130px;
}

.countrytext{
	margin-left: 8px;
	font-weight: bolder;
	color: white;
	font-size: 30px;
	font-family: "Verdana", Arial, sans-serif;
}

.countrypng{
	width: 60px;
}

.partial{
	height: 140px;
}

.instruction{
	margin-left: 60px;
	display: inline-block;
	font-size: 14px;
}

ul {
	margin-top: 0px;
}
#pagebreak{
	page-break-after: always;
}
</style>
</head>
<body>
<div id="wrapper">
	<table>
		<tr>
			<td rowspan="5" width="400px" colspan="1" style="text-align: center;">
				<img id="customerlogo" src="./assets/images/logo_krieghuus.png" alt="" /><br />
				<label style="text-align: center;" id="topleftimgdescr">Vakantiepark de &ldquo;Krieghuusbelten&rdquo;</label>
			</td>
			<td colspan="3" style="text-align: right; vertical-align: top;">
				<img id="maxwifilogo" src="./assets/images/maxwifi.png"  alt="" /><br />
				<label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
			</td>
		</tr>
		<tr style="height: 25px;">
			<td colspan="3">Wifi activationcode</td>
		</tr>
		<tr style="height: 25px;">
			<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
		</tr>
		<tr style="height: 25px;">
			<td colspan="1">Apparaten: </td><td colspan="2">1</td>
		</tr>
		<tr style="height: 25px; line-heigth: 12px;">
			<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
		</tr>
	</table>
	<div id="instructionsection">
		<div class="partial">
			<div class="countrypng"><img id="nllogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">NL</div></div>
			<div class="instruction">
				<b>Instructies</b>
				<ul>
					<li>
					Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
					maken met het Wifi netwerk. Start internet en de activatiepagina opent.
					</li>
					<li>
						Vul de hierboven vermelde toegangscode in.
					</li>
					<li>
						De tijdsduurgebruik gaat in na activatie.
					</li>
					<li>
						U kunt gebruik maken van internet.
					</li>
					<li>
						<b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
					</li>
				</ul>
			</div>
		</div>
		<div class="partial">
			<div class="countrypng"><img id="enlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">EN</div></div>
			<div class="instruction">
				<b>Instructions</b>
				<ul>
					<li>
					Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
					</li>
					<li>
						Log on to the internet. You will land on the activation page.
					</li>
					<li>
						Enter the above mentioned access code. The duration of use starts after activation.
					</li>
					<li>
						You are now ready to use internet.
					</li>
					<li>
						<b>Attention!</b> This code is for use on 1 device
					</li>
				</ul>
			</div>
		</div>
		<div class="partial">
			<div class="countrypng"><img id="delogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">&nbsp;D</div></div>
			<div class="instruction">
				<b>Hinweise</b>
				<ul>
					<li>
					Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
					dan k&ouml;nnen Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
					</li>
					<li>
						Starten Sie internet. Sie bekommen den Aktivierungsseite.
					</li>
					<li>
						Geben Sie den oben erw&auml;hnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
					</li>
					<li>
						Sie k&ouml;nnen jetzt das Internet benutzen.
					</li>
					<li>
						<b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code k&ouml;nnen sie gleichzeitig aktiveren f&uuml;r den Einsatz auf 1 Ger&auml;t.
					</li>
				</ul>
			</div>
		</div>
		<div id="pagebreak" class="partial">
			<div class="countrypng"><img id="frlogo" src="./assets/images/plate.png" alt="" /><div class="countrytext">FR</div></div>
			<div class="instruction">
				<b>Instructions</b>
				<ul>
					<li>
					Ouvrez Votre portable, PDA ou PC. Lorsque vous &ecirc;tes dans les environs d&rsquo;un point d&rsquo;acc&egrave;s Wifi, vous serez reli&eacute;s<br />
					apr&egrave;s quelques secondes automatique au r&eacute;sea Wifi systeme sans fil.
					</li>
					<li>
						D&eacute;marrez internet. Alors sur le site du hotel ou camping.
					</li>
					<li>
						Compl&eacute;tez le code d&rsquo;acc&egrave;s mentionn&eacute; ci-dessus. La dur&eacute;e d&rsquo;utilisation commence apr&egrave;s l&rsquo;activation.
					</li>
					<li>
						Vous pourrez maintenant utiliser internet.
					</li>
					<li>
						<b>Attention!</b> Ce code est utilis&eacute; sur 1 p&egrave;riph&egrave;rique
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</body>

最佳答案

dompdf 中的表格支持是可以接受的，但不是很先进，因此复杂的表格布局在 dompdf 中呈现效果不佳。您可以尝试尽可能地简化您的文档(例如，通过删除似乎没有必要的 colspan/rowspan)。

例如，下面的渲染效果更好一些。

  #wrapper{
	width: 800px;
	background-color: white;
  }
  
  #vouchercode{
	font-weight: bolder;
  }
  
  #topleftimgdescr{
	vertical-align: middle;
	font-weight: bold;
  }
  
  #maxwifihref{
	text-align: center;
  }
  
  #nl{
	height: 130px;
  }
  
  .countrytext{
	font-weight: bolder;
	font-size: 30px;
	font-family: "Verdana", Arial, sans-serif;
  }
  
  .partial{
	margin-top: 2em;
	min-height: 140px;
	page-break-inside: avoid;
  }
  
  .instruction{
	font-size: 14px;
  }
<!doctype HTML>
<head>
  <title>
    voucher pdf
  </title>
</head>
<body>
<div id="wrapper">
  <table>
    <tr>
      <td width="400px" style="text-align: center;">
        <img id="customerlogo" src="http://placehold.it/400x285/cc6666/ffffff&text=dompdf"><br />
        <label style="text-align: center;" id="topleftimgdescr">Vakantiepark de &ldquo;Krieghuusbelten&rdquo;</label>
      </td>
      <td style="text-align: right; vertical-align: top;">
        <img id="maxwifilogo" src="http://placehold.it/175x75/cc6666/ffffff&text=dompdf"  alt="" /><br />
        <label id="maxwifihref" style="margin-right: 50px;"><a>www.maxCoax.nl</a></label>
		<table>
		  <tr style="height: 25px;">
			<td colspan="3">Wifi activationcode</td>
		  </tr>
		  <tr style="height: 25px;">
			<td colspan="1">Tijdsduur: </td><td colspan="2" id="timelimit">10080 minuten</td>
		  </tr>
		  <tr style="height: 25px;">
			<td colspan="1">Apparaten: </td><td colspan="2">1</td>
		  </tr>
		  <tr style="height: 25px; line-height: 12px;">
			<td colspan="1">Activatiecode: </td><td colspan="2" id="vouchercode">PnBndxTvYhu</td>
		  </tr>
        </table>
	  </td>
	</tr>
  </table>

  <div id="instructionsection">
        <div class="partial">
            <div class="countrypng"><img id="nllogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">NL</span></div>
            <div class="instruction">
                <b>Instructies</b>
                <ul>
                    <li>
                    Start uw notebook, PDA of PC. Wanneer u binnen het bereik van een wifi hotspot bent kunt u verbinding<br />
                    maken met het Wifi netwerk. Start internet en de activatiepagina opent.
                    </li>
                    <li>
                        Vul de hierboven vermelde toegangscode in.
                    </li>
                    <li>
                        De tijdsduurgebruik gaat in na activatie.
                    </li>
                    <li>
                        U kunt gebruik maken van internet.
                    </li>
                    <li>
                        <b>Let op!</b> Deze toegangscode is te activeren op 1 apparaat.
                    </li>
                </ul>
            </div>
        </div>
        <div class="partial">
            <div class="countrypng"><img id="enlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">EN</span></div>
            <div class="instruction">
                <b>Instructions</b>
                <ul>
                    <li>
                    Start up your notebook, PDA or PC. Please connect with the Wifi network if you are within range of a Wifi access point.
                    </li>
                    <li>
                        Log on to the internet. You will land on the activation page.
                    </li>
                    <li>
                        Enter the above mentioned access code. The duration of use starts after activation.
                    </li>
                    <li>
                        You are now ready to use internet.
                    </li>
                    <li>
                        <b>Attention!</b> This code is for use on 1 device
                    </li>
                </ul>
            </div>
        </div>
        <div class="partial">
            <div class="countrypng"><img id="delogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">&nbsp;D</span></div>
            <div class="instruction">
                <b>Hinweise</b>
                <ul>
                    <li>
                    Starten Sie Ihr Notebook, PDA oder Ihren PC. Wenn Sie sich innerhald der Reichweite eines Accespoints befinden,<br />
                    dan k&ouml;nnen Sie mit dem drahlosen Netzwerk verbindung machen.<!--haha, machen! -->
                    </li>
                    <li>
                        Starten Sie internet. Sie bekommen den Aktivierungsseite.
                    </li>
                    <li>
                        Geben Sie den oben erw&auml;hnten Aktivierungscode ein. Die Dauerder Anwenung startet nach den Aktivierung.
                    </li>
                    <li>
                        Sie k&ouml;nnen jetzt das Internet benutzen.
                    </li>
                    <li>
                        <b>Achtung<!-- ik ga helemaal stuk hier!-->!</b> Dieser code k&ouml;nnen sie gleichzeitig aktiveren f&uuml;r den Einsatz auf 1 Ger&auml;t.
                    </li>
                </ul>
            </div>
        </div>
        <div id="pagebreak" class="partial">
            <div class="countrypng"><img id="frlogo" src="http://placehold.it/60x35/cc6666/ffffff&text=dompdf" alt="" /><span class="countrytext">FR</span></div>
            <div class="instruction">
                <b>Instructions</b>
                <ul>
                    <li>
                    Ouvrez Votre portable, PDA ou PC. Lorsque vous &ecirc;tes dans les environs d&rsquo;un point d&rsquo;acc&egrave;s Wifi, vous serez reli&eacute;s<br />
                    apr&egrave;s quelques secondes automatique au r&eacute;sea Wifi systeme sans fil.
                    </li>
                    <li>
                        D&eacute;marrez internet. Alors sur le site du hotel ou camping.
                    </li>
                    <li>
                        Compl&eacute;tez le code d&rsquo;acc&egrave;s mentionn&eacute; ci-dessus. La dur&eacute;e d&rsquo;utilisation commence apr&egrave;s l&rsquo;activation.
                    </li>
                    <li>
                        Vous pourrez maintenant utiliser internet.
                    </li>
                    <li>
                        <b>Attention!</b> Ce code est utilis&eacute; sur 1 p&egrave;riph&egrave;rique
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>

注意:我尝试更正一些拼写错误和不正确的选择器。此外，我不确定您在某些布局选择中的目的是什么，所以我只是在这些情况下做出了决定。

关于html - dompdf 行高与源不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29627811/

上一篇：jquery - 使用自定义 CSS3 过渡滚动到

下一篇：javascript - 如何更改显示选项的 HTML5 数据列表背景颜色

相关文章：

css - stylelint - 哪里有创建自己的插件的示例？

php - dompdf : image not found or type unknown

php - 如何在 WordPress 中使用 domPDF

javascript - 如何使用jCarousel放大 slider ？

html - 列表和 "pull-left"使楼梯

firefox - 为什么 Firefox 对输入元素使用 IE 框模型？

html - 如何显示与标题内联的链接？

html - 为什么在网站加载时会出现此 Button 动画？

javascript - 带有cookie的信息框会一直显示

html - 如何在dompdf中使用css并排显示2个表格

©2024 IT工具网  联系我们