-1

我有一个 html 页面，它看起来：

在此处输入图像描述

接下来我使用 NReco.PdfGenerator 库生成 html->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>

正如您在上面看到的，它与我尝试更改代码但无济于事的模式不同。我也改变了缩放，但它没有帮助。我不知道这个空白是从哪里来的。谢谢您的帮助

4

1 回答 1

0

发生这种情况是因为

.main-body {
    width:674px;
}

默认情况下，wkhtmltopdf（由 NReco.PdfGenerator 在内部使用）使用“智能缩小”并尝试自动确定网页宽度，但不小于 ~800px（默认为 96dpi）。所以你必须增加页面的宽度或使用宽度：100%。

于 2017-12-11T06:54:09.630 回答