Question

我需要转换为大量结构化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/>
                            $6,445.34<br/>
                            <br/>
                            7 <br/>
                            $700.00 <br/>
                            <br/> 
                            <span style="color:green;">-$350.00</span><br/>
                            $6,795.34<br/>
                            $373.74<br/>
                            <br/>
                            <span style="font-size:18px; font-weight:strong;">$6,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/>
                            $6,445.34<br/>
                            <br/>
                            7 <br/>
                            $700.00 <br/>
                            <br/> 
                            <span style="color:green;">-$350.00</span><br/>
                            $6,795.34<br/>
                            $373.74<br/>
                            <br/>
                            <span style="font-size:18px; font-weight:strong;">$6,421.50</span>
                            <br/><br/>
                        </p>                        
                    </div>
                  </div>
               </div>
              </div>
            </div>

Answer 1

你可以随时使用

#rootTable .row {display: table;}
#rootTable .row > [class^="col-"] {display: table-cell;}

在你的CSS中，祝你好运。

是否有div to table转换器？

1 个答案: