Question

我正在使用snappy1.4创建一个pdf文件，我想创建2个页面，每个页面分为2个部分（垂直），

我创建了它们：当它们是空的时候它可以，但是当我填充例如带有一些数据的part1时，part2会向下移动。

如果它们仍然固定（在高处），如果它们是空的或者其中一些已经填充

，我如何修复4个部分？

带有空数据的示例1（确定）：

转移了pdf：

我的代码：

    return new Response(
        $this->get('knp_snappy.pdf')->getOutputFromHtml($html,array(
            'orientation'=>'Landscape',
            'default-header'=>null,
           // 'custom-header' =>false,
            //'page-size' =>'A4',
           // 'no-custom-header-propagation'=>false,
            'encoding' => 'utf-8',
            'images' => true,
            'enable-javascript' => true,
            'margin-right'  => 1,
            'margin-left'  =>2,
            'margin-top'  =>0,
            'margin-bottom' =>0,
            'javascript-delay' => 5000
        )),
        200,
        array(
            'Content-Type'          => 'application/pdf',
            'Content-Disposition'   => 'attachment; filename="file1.pdf"'
        )
    );

我的树枝：

   <body>
    <div style=" padding-left:3em;margin-top: 10px;display:inline-block;height: 0.3in ">
        <div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px "  src="{{ absolute_url(asset('images/visa.png' ))}} "  id="imgtun"></div>

    </div>
    <div style=" padding-left:20em;margin-top: 10px;display:inline-block;height: 0.3in">
        <div style="width:35px;display:inline-block;vertical-align: middle;height: 0.3in"><img style="width:35px "  src="{{ absolute_url(asset('images/visa.png' ))}} "  id="imgcenter"></div>
        <div style=" display:inline-block;font-size: 20px; font-weight: bold;vertical-align: middle; text-align: center;height: 0.3in">
            <span style="text-align: center">My file with 4 parts  </span></div>

    </div>

    <div id="Page1" style="width: 100%;  height: 7.8in">

        <div id="Partie_presentation" style="display:inline-block;height: 7.8in; width: 30%">
            <div style="height:0.3in" id="header_presentation">
               <p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
                Part1</p>
            </div>
            <div style="height: 7.5in" id="partie_presentation" >
                <div style="height:1.8in">
                    <p>
                        <span class="detailtitre" style="font-weight: bold">Adress :</span>
                        <span class="detailcont">My adress</span>
                    </p>
                    <p>
                        <span class="detailtitre" style="font-weight: bold">Tél :</span>
                        <span class="detailcont">3389652368</span>
                    </p>
                    <p>
                        <span class="detailtitre" style="font-weight: bold">E-mail :</span>
                        <span class="detailcont">email@gmail.com</span>
                    </p>
                    <p>
                        <span class="detailtitre" style="font-weight: bold">Website :</span>
                        <span class="detailcont">my webste</span>
                    </p>
                </div>
            </div>
        </div>

        <div id="Part2"style="height: 7.8in; display:inline-block;width: 69%">

            <div style="height:0.3in" id="entete_res">
                <p style="height:25px;background-color:darkseagreen;font-weight: bold;font-size: 20px">
                    Part2</p>
            </div>
            <div style="height: 7.5in" id="partie_res" >
                <div id="partie_budget" style="height: 3.8in">
                </div>
                <div id="partie_pers" style="height: 4in">
                </div>
            </div>
        </div>
    </div>{#end page1#}


    <div id="Page2" style="width: 100%; height: 8.1in">
        {#  partie_ac  #}

        <div id="Part3" style=" margin-top:2px;display:inline-block;height: 8.1in; width: 49%">
            <div style="height: 0.3in">
                <p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
                    Part3</p>
            </div>
            <div style="height: 7.8in" id="partie_ac" >

            </div>

        </div>

        {#  partie_per #}
        <div id="Part4" style="display:inline-block;height: 8.1in; width: 50%">
            <div style="height: 0.3in">
                <p style="height:19px;background-color:darkseagreen;font-weight: bold;font-size: 19px">
                    Part4</p>
            </div>

            <div style="height: 7.8in" id="partie_per" >

            </div>
        </div>

    </div>
</body>

Answer 1

这是一个CSS问题。这是修复它的一种方法：

#Partie_presentation {
  float: left;
}

#Part2 {
  float: right; /* or left */
}

See JSFiddle

如果您的情况可能（我不知道Snappy如何工作），请将CSS样式移动到<style>标记或单独的CSS文件。现在您使用的是内联样式，因此HTML非常混乱。

使用snappy创建的PDF文件显示效果不佳

1 个答案: