如何在mpdf中获得完整的图像宽度

Posted 2023-05-07

【中文标题】如何在mpdf中获得完整的图像宽度

【英文标题】：How to get full image width in mpdf

【发布时间】：2020-04-15 10:04:45

【问题描述】：

我正在使用 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】：

当 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>

绝对定位意味着您不必弄乱页边距，但是您将图像从文档流中取出，如果您不小心可能会导致显示问题。