有 div 到 table 转换器吗?
Is there a div to table converter?
我有大量结构化的 HTML 需要转换成才能在 pdfkit 中呈现。
我正在使用 pdfkit,它似乎不能很好地处理布局,但可以很好地处理网格。
如有任何帮助,我们将不胜感激!
<div class="row">
<div class="col-md-10">
<div class="col-md-3 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
Packages
</div>
<div class="col-md-9 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
<h4>User 1 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records out <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax 5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
,445.34<br/>
<br/>
7 <br/>
0.00 <br/>
<br/>
<span style="color:green;">-0.00</span><br/>
,795.34<br/>
3.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">,421.50</span>
<br/><br/>
</p>
</div>
</div>
<h4>User 2 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records sent <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax +5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
,445.34<br/>
<br/>
7 <br/>
0.00 <br/>
<br/>
<span style="color:green;">-0.00</span><br/>
,795.34<br/>
3.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">,421.50</span>
<br/><br/>
</p>
</div>
</div>
</div>
</div>
</div>
您可以随时使用
#rootTable .row {display: table;}
#rootTable .row > [class^="col-"] {display: table-cell;}
在你的css中,
祝你好运。
我有大量结构化的 HTML 需要转换成才能在 pdfkit 中呈现。
我正在使用 pdfkit,它似乎不能很好地处理布局,但可以很好地处理网格。
如有任何帮助,我们将不胜感激!
<div class="row">
<div class="col-md-10">
<div class="col-md-3 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
Packages
</div>
<div class="col-md-9 left" style="padding: 20px 0 30px 0; color:#454545; font-family: Arial, sans-serif; font-size: 16px;">
<h4>User 1 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records out <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax 5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
,445.34<br/>
<br/>
7 <br/>
0.00 <br/>
<br/>
<span style="color:green;">-0.00</span><br/>
,795.34<br/>
3.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">,421.50</span>
<br/><br/>
</p>
</div>
</div>
<h4>User 2 </h4>
<div class="row">
<div class="col-md-6">
<p style="padding-left:20px">
Total records <br/>
Total cycles <br/>
Total records sent <br/>
Consumable Costs<br/>
<br/>
Total Artwork Changes <br/>
Artwork Change Costs <br/>
<br/>
<span style="color:green;">Artwork Change Discount </span><br/>
Subtotal <br/>
Sales Tax +5.5%<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">Total</span><br/>
</p>
</div>
<div class="col-md-6 left">
<p style="padding-left:20px;">
23,334 <br/>
2 <br/>
46,668 <br/>
,445.34<br/>
<br/>
7 <br/>
0.00 <br/>
<br/>
<span style="color:green;">-0.00</span><br/>
,795.34<br/>
3.74<br/>
<br/>
<span style="font-size:18px; font-weight:strong;">,421.50</span>
<br/><br/>
</p>
</div>
</div>
</div>
</div>
</div>
您可以随时使用
#rootTable .row {display: table;}
#rootTable .row > [class^="col-"] {display: table-cell;}
在你的css中, 祝你好运。