web-dev-qa-db-ja.com

mPDF:全ページに背景画像を使用

MPDFを使用して請求書を生成する必要があります。すべての請求書には、ヘッダー、フッター、およびページ全体をカバーする必要がある同じ背景画像が含まれます。

ネット上で他の解決策を見たことがありますが、どれもうまくいきませんでした。

これらはいくつかの試みであり、それらはすべて失敗につながります(画像が表示されない、50 *エラー、または画像を使用するときにコンテンツの一部を覆う画像):

1-外部CSSファイルを使用してCSSコンテンツとして挿入

$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');

$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');


$css = file_get_contents('./styles.css');
$cabecera = file_get_contents('./header.html');
$cuerpo = file_get_contents('./body.html');
$pie = file_get_contents('./footer.html');

$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);
$pdf->WriteHTML($css, 1);

$pdf->WriteHTML($cuerpo, 2);

$pdf->Output();

そして、styles.cssファイル:

body {
    background-image: url('background_300dpi.png') ;
}

これにより、タイムアウトエラーがスローされます。低解像度の画像の背景を使用すると機能しますが、レイアウトが崩れます。

2-SetDefaultBodyCSSで背景画像を設定しようとしています

$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');

$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');


$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');

$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);

$pdf->SetDefaultBodyCSS('background', "url('background_300dpi.png')");
$pdf->SetDefaultBodyCSS('background-image-resize', 6);

$pdf->WriteHTML($cuerpo, 2);

$pdf->Output();

タイムアウトエラーも。低解像度の画像を使用すると機能します。ただし、背景画像に含まれているレターヘッドに小さな文字があるため、これは印刷するのに適したソリューションではありません。

-背景画像のみの代わりに画像(背景画像が上部のレターヘッドと下部の画像に分割されている)を使用しようとし、マージン制約をfalseに設定

$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');

$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');


$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');

$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);

$pdf->WriteHTML($cuerpo, 2);

$pdf->Image('miramar/background_top.png', 0, 0, 210, 28.5, 'png', '', true, false);
$pdf->Image('miramar/background_bottom.png', 0, 259, 210, 38, 'png', '', true, false, false, false);

$pdf->Output();

この場合、タイムアウトはありませんが、フッター画像により、フッターに含まれている一部のコンテンツが失われます。

誰かがそれを達成する方法についてのアイデアを持っていますか?

別の質問:mPDFは背景のベクター画像をサポートしていますか?背景画像をSVGファイルとして使用する場合があります。

3
luis.ap.uyen

わかった!後で推測したように、背景画像をベクター画像(SVG)として使用できるので、この方法でそれを行うことができます。

これはコードです:

$pdf = new mPDF('es', 'A4', 0, '', 5, 5, 0, 0, 0, 0, 'P');

$pdf->useSubstitutions=false;
$pdf->setAutoTopMargin = 'stretch';
$pdf->SetDisplayMode('fullpage');

$cabecera = file_get_contents('./cabecera.html');
$cuerpo = file_get_contents('./cuerpo.html');
$pie = file_get_contents('./pie.html');

$pdf->SetHTMLHeader($cabecera);
$pdf->SetHTMLFooter($pie);

$pdf->SetDefaultBodyCSS('background', "url('./background_image.svg')");
$pdf->SetDefaultBodyCSS('background-image-resize', 6);

$pdf->WriteHTML($cuerpo, 2);

$pdf->Output();

[〜#〜] svg [〜#〜]を使用すると、チャームのように機能し、高速です。

0
luis.ap.uyen

背景を設定するには、bodyの代わりに@pageCSSセレクターを使用します。次に、プロパティbackground-image-resize: 6;を追加して、画像が各ページの幅と高さ全体をカバーするようにします。

Styles.cssの場合:

@page {
    background: url('/full/path/to/image/background_300dpi.png') no-repeat 0 0;
    background-image-resize: 6;
}
2
Jake Jackson

サンプルファイルで表示します:example54_new_mPDF_v5-1_features_gradients_and_images.php

<?php


$path = (getenv('MPDF_ROOT')) ? getenv('MPDF_ROOT') : __DIR__;
require_once $path . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();

//==============================================================
$html = '
<style>
table {
    background: url(\'assets/bayeux1.jpg\') repeat scroll left top;
}
.table1 tr.thisrow1 {
    background-image-resolution: 300dpi;

}
.table1 tr.thisrow1 td {
    height: 28mm;
}
.table1 tr.thisrow2 {
    background-image: none;
    background: -moz-linear-gradient(left, #c7Fdde 20%, #FF0000 );
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.29, rgb(90,83,12)), color-stop(0.65, rgb(117,117,39)), color-stop(0.83, rgb(153,153,67)));
}
</style>

<table class="table1">
<tbody>
    <tr><td>Row 1</td><td>This is data</td><td>This is data</td></tr>
    <tr class="thisrow1">
        <td>This row has</td>
        <td>a background-image</td>
        <td>of the bayeux tapestry</td>
    </tr>
    <tr><td><p>Row 3</p></td><td><p>This is long data</p></td><td>This is data</td></tr>
    <tr class="thisrow2"><td>This row has</td><td>a gradient set</td><td>which spans all 3 cells</td></tr>
    <tr><td>Row 5</td><td>Also data</td><td>Also data</td></tr>
</tbody>
</table>


';

$mpdf->WriteHTML($html);

$mpdf->Output(); exit;
0
nthaih