Question

我正在尝试使用dompdf v0.6.1-4创建一个pdf。然而，在创建pdf时，我遇到了以下奇怪的问题。表格上的dompdf完全忽略行高。每行的高度都是100像素。这不是我想要它的方式。

这是html

＆＃13;

<!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>

＆＃13;

Answer 1

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>

注意：我尝试纠正了一些拼写错误和不正确的选择器。另外，我不确定你在某些布局选择中的用途，所以我只是在这些情况下做出了决定。

dompdf行高与源不同

1 个答案: