yii2 html到pdf小部件无法匹配css代码

yii2 html到pdf小部件无法匹配css代码,pdf,yii2,html2pdf,Pdf,Yii2,Html2pdf,我是Yii2的新手。我现在的工作是用一些小部件生成PDF,比如html2pdf和mpdf。我的HTML和CSS代码在IE(客户需求)中显示得非常好,如下图所示。 当我生成PDF文件时,它是一团乱。 我将完整的HTML内容分配到控制器中的一个变量中,就像这样 public function actionReport() { $username = Yii::$app->user->identity->username; $html = <<<

我是Yii2的新手。我现在的工作是用一些小部件生成PDF,比如html2pdf和mpdf。我的HTML和CSS代码在IE(客户需求)中显示得非常好,如下图所示。

当我生成PDF文件时,它是一团乱。

我将完整的HTML内容分配到控制器中的一个变量中,就像这样

public function actionReport()
{
    $username = Yii::$app->user->identity->username;
    $html = <<<HTML
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <style>
          #bop_event{
             border:outset thin black;
             padding: 1% 1% 1% 1%;
             width: 18cm;
             height: 29.7cm;
          }
          #logo{
             //border:outset thin black;
             display: block;
          }
         .logo,.hidden_logo{
             display:inline-block;
             width:32%;
             padding:1% 1% 1% 1%;
             // border: outset thin red;
          }
          .hidden_logo{
             visibility:hidden;
          }
          #bop_title{
             border:outset thin black;
             padding:5px 5px 5px 5px; 
             text-align:center;
             margin-bottom:1%;
          }
          #bop_desc{
             border:outset thin black;
             padding:5px 5px 5px 5px;
             font-size:1.2em;
             margin-bottom:3%;
          }
          .subcontent_area{
             margin-bottom:3%;
          }
          .subcontent_title,#signature{
             font-size:1.2em;
             font-weight:bold;
          }
          .field{
             display: inline-block;
             font-size:1em;
             width:30%;
             border:outset thin black;
             margin-bottom:1%;
             //margin-right:1%;
          }
          .field_title{
             font-weight:bold;
             border-bottom: outset thin;
             padding-left:2%;
          }
          .field_data{
             padding-left:2%;
          }
          .hidden_field{
             visibility:hidden;
             display:inline-block;
             width:30%;
          }
          #place_sign{
             text-align:center;
             /*width:31%;*/
          }
         .sign,.hidden_sign{
             display:inline-block;
             /*width:28%;*/
             text-align:center;
             // border: outset thin red;
         }
         .person{
             /*margin-top:27%;*/
             width:relative;
             // border: outset thin black;
         }
         .hidden_sign{
             visibility:hidden;
         }
      </style>
      </head>
      <body>
         <div id="bop_event">
           <div id="logo">
              <div class="logo" >
                <img src="images\rpt_axa_logo_left_bg.png" align="left" />
              </div>
           <div class="hidden_logo" ></div>
              <div class="logo" >
                <img src="images\rpt_mandiri_axa_logo_right_bg.png" align="right" />
              </div>
           </div>
           <div id="bop_title">
              <h1><b>BOP Event Proposal</b></h1>
           </div>
           <div id="bop_desc">
               Dengan ini saya yang bertanda tangan di bawah ini mengajukan permohonan untuk penggantian biaya BOP yang akan diselenggarakan dengan detil sebagai berikut.
           </div>
           <div id="konten">
              <div id="event_budget" class='subcontent_area'>
                 <div class="subcontent_title">
                   Detil Event dan Budget
                 </div>
                 <div class="field">
                    <div class="field_title">Tanggal BOP</div>
                    <div class="field_data">31 Maret 2017</div>
                 </div>
                 <div class="field">
                    <div class="field_title">Jenis BOP</div>
                    <div class="field_data">Reguler BOP</div>
                 </div>
                 <div class="field">
                    <div class="field_title">Total Biaya</div>
                    <div class="field_data">Rp3.000.000,-</div>
                 </div>

                 <div class="field">
                    <div class="field_title">Kota</div>
                    <div class="field_data">Jakarta</div>
                 </div>
        <!--<div class="field">
            <div class="field_title">Tempat Pelaksanaan</div>
            <div class="field_data">AXA Tower</div>
        </div>-->
              </div>

              <div id="speaker_pic" class='subcontent_area'>
                  <div class="subcontent_title">
                     Pembicara dan PIC
                  </div>
                  <div class="field">
                     <div class="field_title">Pembicara</div>
                     <div class="field_data">Eksternal</div>
                  </div>
                  <div class="field">
                      <div class="field_title">Nama Pembicara</div>
                      <div class="field_data">Indra Gunawan</div>
                  </div>
                  <div class="field">
                      <div class="field_title">Keterangan</div>
                      <div class="field_data">tess</div>
                  </div>
                  <div class="field">
                      <div class="field_title">PIC Management</div>
                      <div class="field_data">Rainaldy</div>
                  </div>
                  <div class="field">
                      <div class="field_title">No HP PIC</div>
                      <div class="field_data">08112223456</div>
                  </div>
                  <div class="hidden_field">
                      <div class="field_title">-</div>
                      <div class="field_data">-</div>
                  </div>
                  <div class="field">
                      <div class="field_title">PIC Agency</div>
                      <div class="field_data">Imam Hidayat</div>
                  </div>
                  <div class="field">
                      <div class="field_title">No HP PIC</div>
                      <div class="field_data">08112223456</div>
                  </div>
              </div>

              <div id="comitment_plan" class='subcontent_area'>
                 <div class="subcontent_title">
                    Komitment/Plan
                 </div>
                 <div class="field">
                     <div class="field_title">Total Peserta BOP</div>
                     <div class="field_data">50</div>
                 </div>
                 <div class="field">
                     <div class="field_title">Total Agent Code</div>
                     <div class="field_data">30</div>
                 </div>
                 <div class="field">
                     <div class="field_title">Total NR</div>
                     <div class="field_data">25</div>
                 </div>
              </div>
          </div>
          <div id="signature">
          <div id="place_sign">Kota, <?php date_default_timezone_set('Asia/Jakarta'); echo date('d M Y');?>
          </div>
          <div id="sign_area">
             <div class="sign">
                <div>Proposed By</div>
                <div class="person">$username</div>
             </div>
             <div class="hidden_sign"></div>
             <div class="sign">
                <div>Approved By</div>
                <div class="person">()</div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
HTML;
    return Yii::$app->html2pdf->convert($html)->saveAs('output.pdf');
}
public function actionReport()
{
$username=Yii::$app->user->identity->username;
$html=
佩姆比卡拉丹皮克酒店
彭比卡拉
胸骨
纳马·彭比卡拉
谢全新
凯特兰根
苔丝
PIC管理
雷纳尔迪
没有HP图片
08112223456
-
-
事先知情同意机构
伊玛目希达亚特
没有HP图片
08112223456
义务/计划
佩塞塔国际收支总额
50
总代理代码
30
总NR
25
科塔,
提议人
$username
批准人
()
HTML;
返回Yii::$app->html2pdf->convert($html)->saveAs('output.pdf');
}
.field是包含该框的类。 有人遇到过这个问题吗


感谢您的帮助。

css可能会出错,因为:1。使用未包含的css类。您可以将css文件传递给mpdf,甚至可以尝试使用内联样式。发布您的pdf生成代码&查看页面的一部分,以便于理解。您好,感谢您的回复。我添加了我的代码。请检查它是否有助于您识别@Gunnrryy问题请参考。所以,您是说html2pdf小部件不支持所有css代码。。?那么,您是否有建议使用Yii2中支持的所有css生成pdf?@Gunnrryy