Полная страница 3 колонки макета в DomPDF - PullRequest
Новая
       58

Полная страница 3 колонки макета в DomPDF

2 голосов
/ 09 июля 2019

Я использую dompdf для генерации PDF следующим образом: 

public function generatePdf($customerId){
    // instantiate and use the dompdf class
    $dompdf = new Dompdf();
    $options = new Options();
    $options->setIsRemoteEnabled(true);

    $dompdf->setOptions($options);
    $dompdf->loadHtml($this->renderHtml());

    // (Optional) Setup the paper size and orientation
    $dompdf->setPaper('A4', 'potrait');

    // Render the HTML as PDF
    $dompdf->render();
    // Output the generated PDF to Browser
    $dompdf->stream();
}

$this->renderHtml() вернет строку, содержащую HTML-текст, подобный этому: 

       <style>
        .first-page .bottom{
          display:inline;
          width:100%;
        }
        .first-page .bottom .section{
          display: block;
          width:25%;
          height: 30px;
        }
        .first-page .bottom .left.section{
        }
        .first-page .bottom .right.section{
          width:37%;
          margin-right:0;
        }
      </style>
      <div class = "first-page">
        <div class = "bottom">
           <div class="left section">
              <p class="title">How to activate Card</p>
              <p class="main">
                <ol>
                   <li>Open Purse Pay</li>
                   <li>Lo-in to V-Card feature</li>
                   <li>Input your V-Card number.</li>
                </ol>
              </p>
           </div>
           <div class="middle section">
              <p class="title">How to use V-Card</p>
              <p class="main">
                <ol>
                   <li>Find merchant who accept V-Card payment</li>
                   <li>Stick QR-Code to Merchant Machine ‘<i>White Box</i>’ Purse Pay.</li>
                   <li>Check your transaction and credit amount from Purse Pay APP.</li>
                </ol>
              </p>
           </div>
           <div class="right section">
              <p class="title">Tips to use V-card safely</p>
              <p class="main">
                <ol>
                   <li>If you lost yout card, block your card immediately from Purse Pay App or you can contact our Customer Support <span class="bold">150 555</span>.</li>
                   <li>Keep your pin secret</li>
                   <li>Always update if you have changes on your data (Phone number, e-mail, shipping address, profile picture, etc)</li>
                   <li>If you do not use your card anymore, please shred or cut your V-Card into pieces using magenetic shredder.</li>
                   <li>Jika kartu sudah tidak lagi digunakan, harap untuk menggunting kartu V-card dengan gunting magnetik.</li>
                </ol>
              </p>
           </div>
        </div>
      </div>

результат будет выглядеть следующим образом в pdf, div перекрывается и все содержимое выравнивается по левому краю:

example

я хочу, чтобы результат в 3 столбцах распределялся равномерно так:

example

как мне этого добиться?

Ответы [ 2 ]

0 голосов
/ 09 июля 2019

Вы можете использовать гибкую сетку, чтобы сделать это. 

div.bottom{
    display:flex;
    flex-direction:row;
}

div.section {
     flex:1
}

Таким образом, каждая секция будет иметь одинаковую ширину, около 33%. Попробуйте удалить все предыдущие настройки стилей. Надеюсь, это поможет.

0 голосов
/ 09 июля 2019

Вот вам, вам нужно протестировать ваш css, ему не хватает многих вещей, чтобы он работал. Смотрите код ниже: https://jsfiddle.net/0L25vxo8/2/

.first-page .bottom{
  display:inline;
  width:100%;
}
.first-page .bottom .section{
  display: block;
  width:32%; /* And a width for all section */
  float: left; /* Adding a floating attribute */
  height: 30px;
}
.first-page .bottom .left.section{

}
.first-page .bottom .right.section{
  width:33%; /* Overide width */
}
.first-page .bottom .middle.section{

}
...