5

我有大量的结构化 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>
4

1 回答 1

2

你可以随时使用

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

在你的 CSS 中，祝你好运。

于 2017-04-12T00:17:54.637 回答