Как получить полную ширину изображения в mpdf - PullRequest
Новая
       12

Как получить полную ширину изображения в mpdf

0 голосов
/ 15 апреля 2020

Я использую mpdf для конвертации html страницы. Я добавил код, как показано ниже. 

         $html=$this->load->view('client_admin/test_poepdf',$data, true);

        $pdfFilePath ="Test_".$task_id.'_'.$startdate.'.pdf';

      $pdf = $this->m_pdf->load();
        $stylesheet ='';
        $stylesheet .= file_get_contents(base_url().'assets/css/bootstrap.min.css'); // external css
        $stylesheet .= file_get_contents(base_url().'assets/css/icons.css'); // external css
        $pdf->WriteHTML($stylesheet,1);
        $pdf->WriteHTML($html,2);
        $pdf->Output($pdfFilePath, "D");
        $pdf->Output($destination2, "F");

Я добавил одно изображение на странице mpdf и добавил для него ширину, как показано ниже: 

<td style="width:100%;"><img src="<?php echo base_url();?>assets/poeimages/<?php echo $filename;?>" class="side_logos" id="poeid" style="width:1300px;height:auto;"></td>

    </tr>

, но ширина изображения не применяется, если я открываю в браузер это применяет. Пожалуйста, помогите мне.

1 Ответ

1 голос
/ 16 апреля 2020

Когда mPDF генерирует ваш PDF, он помещает почти весь ваш контент в «область печати». Площадь печати рассчитывается как: поле страницы минус поля. 

______________________________
|                         |   |<- sheet
|                         |<--+-- crop marks
|   ______________________|___|
|  |    A                 |   |
|  |    ______________    |<--+-- page box
|  |   |   HEADER     |   |   |
|  | D |              | B |   |
|  |   |              |   |   |
|  |   |              |<--+---+-- page box minus margins = printed area
|  |   |              |   |   |
|  |   |              |   |   |
|  |   |              |   |   |
|  |   |___FOOTER_____|   |   |   A: margin-top
|  |    C                 |   |   B: margin-right
|  |______________________|   |   C: margin-bottom
|                             |   D: margin-left
|_____________________________|

Ссылка: http://mpdf.github.io/paging/using-page.html

Из вашего примера я вижу, что у вас есть ваше изображение внутри тега <table>. Если ширина таблицы (не <td>) не установлена ​​на 100%, это дополнительно ограничит общую ширину вашего изображения.

У вас есть несколько вариантов здесь. Вы можете установить поля страницы равными нулю, а таблицу равными 100%: 

<style>
    @page {
        margin: 0;
    }

    table {
        width: 100%;
    }
</style>

Это будет означать, что вам нужно добавить левое и правое поля / отступы обратно в элементы, которые вы не хотите иметь Ширина 100%, хотя.

Или вы можете извлечь свое изображение из таблицы и поместить его в тег <div> верхнего уровня, который будет иметь абсолютную позицию на странице: 

<div style="position: absolute; left: 0; width: 100%; >
   <img src="" />
</div>

Абсолютное позиционирование будет означать, что вы не Вам не нужно возиться с полями страницы, но вы убираете изображение из потока документов, что может вызвать проблемы с отображением, если вы не будете осторожны.

...