在我的 pdf 打印页表中无法正确显示答案

【问题标题】：In my pdf print page table not show correctly在我的 pdf 打印页表中无法正确显示
【发布时间】：2020-04-04 08:45:19
【问题描述】：

我在此打印页面上有一个PDF 打印页面我有一个表格我正在使用col-md-4 将该表格分成两部分，但它显示错误。

我想这样展示

                                            PAY SLIP PRIN
                       POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.
Employee Name : abc
User ID :9

    col-md-4            col-md-4
  Baic pay   50       PF                 ----
  DA         20       ESI                ----
  Total      70       Total Deduction    ----

但它显示了错误的方式，你可以在下面的图片中看到。

我的代码：

<style>
table {
    width:100%;
    border-collapse: collapse;
}
th, td{
    border: 0.5px solid black;
}
@page {
    margin: 10px; 
    margin-header: 25px; 
    margin-footer: 25px;
}
</style>

<div class="content-wrapper"> 
<section class="content" >
  <div class="box box-primary">
    <div style="text-align: center;" class="box-header with-border">
        <h5 class="box-title">PAY SLIP PRINT </h5>
    </div>

            <div  class="col-md-12 row">
                <div class="col-md-12">
                    <div class="form-group" style="text-align: center;">
                         <b>POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.</b>
                    </div>
                </div>
            </div>

    <?php 
        for ($i=0; $i < count($paySlip); $i++): 
        foreach ($paySlip[$i] as $cm):
            $tot = $cm['basic_pay']+$cm['pay_da'];
      ?>
<form role="form" id="print_pay_slip" method="POST" enctype="multipart/form-data">
<p>Employee Name :  <?php echo $cm['user_full_name']; ?></p>
<p>User ID       :  <?php echo $cm['emp_id']; ?></p>
<div class="row">
<div class="col-md-12">
<div class="col-md-1"></div>
<div class="col-md-4">

<div class="table-responsive">                      
    <table class="table table-bordered">
        <tbody>                                     

            <tr>
                <td colspan="1">Basic Pay</td>  
                <td colspan="1"><?php echo $cm['basic_pay']; ?></td>                                            
            </tr>
            <tr>
                <td>DA</td>
                <td><?php echo $cm['pay_da']; ?></td>
            </tr>
            <tr>
                <td colspan="1">Total</td>
                <td colspan="1"><?php echo $tot ?></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

<div class="col-md-4">
<div class="table-responsive">
<table class="table table-bordered">
    <tbody>                                     
        <tr>
            <td colspan="1">PF</td>  
            <td></td>                                           
        </tr>
        <tr>
            <td colspan="1">ESI</td>
            <td colspan="1"></td>
        </tr>
        <tr>
            <td colspan="1">Total Deductions</td>
            <td colspan="1"></td>
        </tr>
    </tbody>
</table>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
    <?php
     endforeach;
     endfor;
    ?>
</section>
</div>

控制器：

public function PrintPage(){

        $data = array();
        $payslipId = $this->input->post("payslip_ids");

        for ($i = 0; $i < count($payslipId); $i++):

            $modelResult = $this->pay_model->multiPaySlipPrintPage($payslipId[$i]);
            $data['paySlip'][$i] = $modelResult;

        endfor;

        require_once 'vendor/autoload.php';
        $mpdf = new \Mpdf\Mpdf([
        'mode' => 'utf-8',
        'format' => 'A4',
        'orientation' => 'P'
        ]);

        $html = $this->load->view('pay_slip/print_pay_slip',$data, true);
        $mpdf->WriteHTML($html);
        $mpdf->Output(date('M').'_payslip.pdf', \Mpdf\Output\Destination::INLINE);

        }

请帮助我在PDF 打印页面中显示正确的表格。

【问题讨论】：

是否添加了引导 css ？
是的，需要的 bootstrap 和 CSS 添加文件
这能回答你的问题吗？ How to use bootstrap in mPDF?
你能用 codepen 或 jsfiddle 分享你的代码吗？ @farhantechno
你的 BS col 结构似乎到处都是。除非我离题很远，否则所有这些 col-md-* 类都不会加起来。

标签： php html twitter-bootstrap codeigniter mpdf

【解决方案1】：

mPDF 不完全支持 Bootstrap 样式。一个选项将是一些替代方案，例如基于无头铬的 wkhtmltopdf。

但是可以试试这个

就我而言，我使用的是带有 MPDF 6.0 版的 Bootstrap 3.3.7。它运行良好，没有任何错误。

$stylesheet = file_get_contents('css/bootstrap-3.3.7.min.css');
$mpdf->WriteHTML($stylesheet, 1); // CSS Script goes here.
$mpdf->WriteHTML($html, 2); //HTML Content goes here.
$mpdf->Output();

【讨论】：