在 html2pdf 中使用 css 浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8776391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Working with css floats in html2pdf
提问by Wern Ancheta
I'm using floats to position 2 divs beside each other.
我正在使用浮点数将 2 个 div 并排放置。
<a href="printbox.php">print</a>
<?php ob_start(); ?>
<style>
#sidedish{
float: left;
border: 1px solid black;
width: 100px;
height: 100px;
}
#maindish{
float: right;
width: 200px;
border: 1px solid black;
height: 100px;
text-align: center;
}
#container{
width: 304px;
height: 100px;
border: 1px solid black;
}
</style>
<div id="container">
<div id="sidedish"></div>
<div id="maindish"><div id="box">name</div></div>
</div>
<?php $_SESSION['boxes'] = ob_get_contents(); ?>
Here is what printbox do, it just renders the buffered data into a pdf, but somehow the floats that were set were lost in the process.
这就是 printbox 所做的，它只是将缓冲的数据呈现为 pdf，但不知何故，设置的浮点数在此过程中丢失了。
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(0, 0, 0, 0));
$html2pdf->writeHTML($_SESSION['boxes']);
$html2pdf->Output('random.pdf');
?>
It works fine on html:
它在 html 上运行良好：
but when I click on print it turns to this:
但是当我点击打印时，它变成了这个：
Any idea what the problem is?
知道问题是什么吗？
回答by Jari Kein?nen
Speaking from personal experiences, I would say styling the output of HTML2PDFis, at best, esoteric black magic science. The main reasons for this are:
就个人经验而言，我会说设计输出的样式HTML2PDF充其量是深奥的黑魔法科学。造成这种情况的主要原因是：
- The class only supports a (relatively small) subset of CSS styles & selectors
- CSS compatibility is undocumented
- PDF is impossible to debug in relation to the HTML input
- 该类仅支持 CSS 样式和选择器的（相对较小的）子集
- CSS 兼容性未记录在案
- 与 HTML 输入相关的 PDF 无法调试
To be fair, this is not only the issue for HTML2PDFbut also for the TCPDFthat HTML2PDFuses.
说句公道话，这不仅是对这一问题HTML2PDF，但也为TCPDF那HTML2PDF用途。
It mightbe possible that HTML2PDF, being just an almost-zero-setup, quick & easy alternative interface for the TCPDF, cuts more CSS support off — but I'm sure that even TCPDFwouldn't support floatproperly.
这也许是可能的HTML2PDF，是只是一个几乎零设置，快捷和方便的替代接口的TCPDF，更削减CSS支持-不过我敢肯定，甚至TCPDF不会支持float正常。
The best workaround that you could use is to send your floating divs to the nineties:
您可以使用的最佳解决方法是将浮动 div 发送到 90 年代：
<table>
<tr>
<td><div class="float"> ... </div></td>
<td><div class="float"> ... </div></td>
</tr>
</table>
You could also hide this embarrassment from the public HTML:
你也可以在公共 HTML 中隐藏这种尴尬：
<?php
$isPdf = (/* condition that tells us we're outputting PDF */) ? true : false;
if ($isPdf) {
echo "<table><tr><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td><td>";
}
?>
<div class="float"> ... </div>
<?php
if ($isPdf) {
echo "</td></tr></table>";
}
?>
回答by Cedo
You can see the quick documentation online in french here: http://demo.html2pdf.fr/examples/pdf/about.pdf
您可以在此处以法语在线查看快速文档：http: //demo.html2pdf.fr/examples/pdf/about.pdf
('Les float ne sont gérés que pour la balise IMG')
（'Les float ne sont gérés que pour la balise IMG'）
= Floats are only handled for img markupsby the class.
=浮点数仅由类处理 img 标记。
Handled css properties are also listed in the doc.
文档中还列出了处理的 css 属性。
