NReco.PdfGenerator错误的pdf生成

Question

I have a page in html which looks : 我有一个html页面，看起来：

Next I'm using NReco.PdfGenerator library to generate html->pdf The result of the above page: 接下来，我使用NReco.PdfGenerator库生成html-> pdf上一页的结果：

My html code: 我的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>

As you can see above, it differs from the pattern I tried to change the code but to no avail. 如您在上面看到的，它与我尝试更改代码的模式不同，但无济于事。 I also changed zoom but it didn't help. 我也更改了缩放比例，但没有帮助。 I don't know where this empty space is from. 我不知道这个空白来自哪里。 Thank you for your help 谢谢您的帮助

Answer 1

This happens because of 发生这种情况是由于

.main-body {
    width:674px;
}

by default wkhtmltopdf (which is internally used by NReco.PdfGenerator) uses 'smart shrinking' and tries to determine web page width automatically, but no less than ~800px (for default 96dpi). 默认情况下，wkhtmltopdf（由NReco.PdfGenerator内部使用）使用“智能收缩”功能，并尝试自动确定网页宽度，但不得小于800px（对于默认96dpi）。 So you have to increase width of your page or use width:100%. 因此，您必须增加页面的宽度或使用width：100％。

NReco.PdfGenerator错误的pdf生成

问题描述

1 个解决方案

解决方案1
0 2017-12-11 06:54:09

NReco.PdfGenerator错误的pdf生成

问题描述

1 个解决方案

解决方案1 0 2017-12-11 06:54:09

解决方案1
0 2017-12-11 06:54:09