Question

我的html页面看起来很像：

接下来，我使用NReco.PdfGenerator库生成html-＆gt; pdf 上面的结果：

我的HTML代码：

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.main-body {
width:674px;
}
.bottom-border {
border-bottom: 1px solid black;
}

.left-column{
width:50%;
float:left;
}


.left-column-small{
 display: inline-block;
float:left;
margin-right:11px;
}


.right-column-big{
display: inline-block;
text-align:left !important;

}

.right-column{
width:50%;
float:right;
}

.text-right{
text-align:right;
}

.display-flex {
    display:flex;
}

.flex {
flex:1;
}

.remove-margin {
-webkit-margin-after: 0em;
}


.border-right {
border-right: 1px solid black;
}

.border-top {
border-top: 1px solid black;
}

.margin-left {
margin-left:17px;
}

.align-left{
text-align:left;
}

</style>
</head>

<body>
<div class="main-body">
    <div class="bottom-border">
        <p>Centrum medyczne</p>
        <p><br/></p>

    </div>
    <div class="display-flex">
      <div class="left-column flex">
     <span>Imie nazwisko</span>

      <br/><br/><br/>
       <p class="remove-margin">OL</p>
      </div>

      <div class="right-column text-right flex">
      test<br/>
      test2<br/>
      test3
      <p class="remove-margin">OL</p>
      </div>
    </div>


        <div class="display-flex">
      <div class="left-column flex border-right">
            <span>oko prawe</span><br/>
            <span>Fakijne</span><br/><br/>
            <span>data<span><br/>


            <div class="left-column-small flex ">
            <div class="border-top">
                <table>
                    <tr>
                    <td></td>
                    <td>Jill</td>
                    <td>1</td> 
                    </tr>
                    <tr>
                    <td></td>
                    <td>fgfgfg</td>
                    <td>2</td> 
                    </tr>
                </table>

            </div>
            </div>

            <div class="right-column-big text-right flex">
            <div class="border-top">
                            <table>
                    <tr>
                    <td></td>
                    <td>Jill</td>
                    <td>1</td> 
                    </tr>
                    <tr>
                    <td></td>
                    <td>fgfgfg</td>
                    <td>2</td> 
                    </tr>
                </table>
            </div>
            </div>
      </div>

      <div class="right-column  flex">
            <div class="text-right flex">
            <span>oko lewe</span><br/>
            <span>Fakijne</span><br/><br/>

            </div>
            <div class="margin-left">
            <div >data</div>
            <div class="left-column-small flex ">

            <div class="border-top">
                <table>
                    <tr>
                    <td></td>
                    <td>Jill</td>
                    <td>1</td> 
                    </tr>
                    <tr>
                    <td></td>
                    <td>fgfgfg</td>
                    <td>2</td> 
                    </tr>
                </table>

            </div>
            </div>

            <div class="right-column-big flex">
            <div class="border-top">
                            <table>
                    <tr>
                    <td></td>
                    <td>Jill</td>
                    <td>1</td> 
                    </tr>
                    <tr>
                    <td></td>
                    <td>fgfgfg</td>
                    <td>2</td> 
                    </tr>
                </table>
            </div>
            </div>
            </div>

      </div>
    </div>








</div>

</body>
</html>

如上所示，它与模式不同我试图改变代码，但无济于事。我也改变了变焦，但没有帮助。我不知道这个空地来自哪里。谢谢你的帮助

Answer 1

这是因为

.main-body {
    width:674px;
}

默认情况下，wkhtmltopdf（由NReco.PdfGenerator内部使用）使用＆＃39; smart shrinking＆＃39;并尝试自动确定网页宽度，但不低于~800px（默认为96dpi）。因此，您必须增加页面宽度或使用宽度：100％。

NReco.PdfGenerator不正确的pdf生成

1 个答案: