HTML 到 PDF 第一页空白答案

【问题标题】：HTML to PDF first page BlankHTML 到 PDF 第一页空白
【发布时间】：2019-06-19 07:56:23
【问题描述】：

我正在转换 HTML to PDF 并且它工作正常，但问题是当我生成 PDF 时，PDF 的第一页是空白的。所有记录均从该 PDF 的第二页设置。

我正在使用 Codeigniter 框架。并使用下面的包

 @package   Html2pdf
 * @author    Laurent MINGUET <webmaster@html2pdf.fr>
 * @copyright 2017 Laurent MINGUET

下面是做这一切的代码。

try {
            $html2pdf = new Html2Pdf('P', 'A4', 'fr');
            $html2pdf->pdf->SetDisplayMode('fullpage');
            $html2pdf->writeHTML($content);
            $html2pdf->output($pdfname.'.pdf','D');
        } catch (Html2PdfException $e) {
            $html2pdf->clean();

            $formatter = new ExceptionFormatter($e);
            echo $formatter->getHtmlMessage();
        }

下面是html的内容

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="x-apple-disable-message-reformatting">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Invoice</title>
        <style type="text/css">

        body {background-color: rgb(204,204,204); margin: 0; padding: 0;}
        .header {margin-bottom: 40px;}
        /*.header div {width: 700px;}*/
        .text-right {text-align: right;}
        .table-value td { border-bottom: 1px solid #e7ecf1;
        border-right: 1px solid #e7ecf1;
        border-left: 1px solid #e7ecf1;}
        .table-value th{ border-top: 1px solid #e7ecf1;
        border-bottom: 2px solid #c8c8c8;
        border-right: 1px solid #e7ecf1;
        border-left: 1px solid #e7ecf1;}

        </style>
    </head>
    <body>
        <!-- <page size="A4"> -->
        <div class="header">
            <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; font-size: 11pt;">
                <tr>
                    <td colspan="1" style="width: 360px;">
                        <img src="http://test.com/assets/image-2019-05-13-16-32-28-565.png" style="width: 60%;">
                    </td>
                    <td colspan="1" valign="middle" style=" text-align: right; width: 350px;">
                        <p style="margin: 0;">Test</p>
                        <p style="margin: 0;">Test</p>
                        <p style="margin: 0;">Test</p>
                    </td>
                </tr>
            </table>   
        </div>
        <div class="content">
            <div class="content-box" style="padding-bottom: 30px; border-bottom: 1px solid #000; margin-bottom: 50px;">
                <p style="color: #d71383;font-size: 36px;margin-bottom: 10px;">Test</p>
                <p></p>
                <div style="line-height: 20px;">
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="client-name">Test: <span>##COMPANYNAME##</span></div>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="client-contact">Test: <span>##USERNAME##</span></div>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="client-email">E-mail: <span>##EMAIL##</span></div>
                    <p></p>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="uren-periode">Test: <span>##FROMDATETODATE## </span></div>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="datum">Test: <span>##TODAYDATE##</span></div>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="total-aantal-uren">Total: <span>##HOURMIN##</span></div>
                    <div style="margin-top: 0px;margin-bottom: 0px;" id="hourly-rate">Test: <span>##HOURLYRATE##</span></div>
                </div>
            </div>
            <div class="table-value-box">
                <div class="table-responsive">
                    <table class="table-value" width="100%" cellspacing="0" cellpadding="0" role="presentation"  style="max-width: 800px;margin: 0 auto; font-size: 11pt;">
                        <thead>
                            <tr>
                                <th style="width: 60px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Ticket #</span></th>
                                <th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Datum</span></th>
                                <th style="width: 288px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Onderwerp</span></th>
                                <th style="width: 158px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Tijd</span></th>
                                <th style="width: 100px;text-align: center;vertical-align: middle;line-height: 5px; height: 25px;"><span>Status</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            ##DATA##
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--   </page> -->
    </body>
</html>

任何帮助将不胜感激。

【问题讨论】：

为什么要创建两次 $html2pdf 对象？你能检查一下是不是这个问题吗？
@arjithn 我更新了问题并添加了 html 内容。请立即检查。

标签： php codeigniter html-to-pdf

【解决方案1】：

不调用构造函数两次，试试下面的：

 try {

            $html2pdf = new Html2Pdf('P', 'A4', 'fr', true, 'UTF-8', [2, 2, 2, 5]);
            $html2pdf->pdf->SetDisplayMode('fullpage');
            $html2pdf->writeHTML($content);
            $html2pdf->output($pdfname.'.pdf','D');
        } catch (Html2PdfException $e) {
            $html2pdf->clean();

            $formatter = new ExceptionFormatter($e);
            echo $formatter->getHtmlMessage();
        }

另外，页数和分页符的位置在很大程度上取决于您的 html 内容的结构。使用 html2pdf 时，空的 <page> 标签或错位的 <div> 也会造成麻烦。

如果上述解决方案不起作用，请发布示例html文档内容，尤其是浏览器源代码的前几行，将尽力帮助

【讨论】：

对我来说，当我尝试使用上述 HTML 内容时，我没有得到任何额外的空白页。你检查你的 CSS 了吗？