时间戳

首页 > 解决方案 > 如何在mpdf中获得完整的图像宽度

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

问题描述

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

但是如果我在浏览器中打开它正在应用，则图像宽度不适用。请帮我。

标签： htmlcodeignitermpdf

解决方案

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

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

推荐阅读