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

Question

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

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

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

绝对定位意味着你不必弄乱页边空白，但你会将图像从文档流中删除，如果你不小心，这可能会导致显示问题。