使用飞碟库生成的 pdf 格式问题答案

【问题标题】：Formatting issue in generated pdf using flying-saucer library使用飞碟库生成的 pdf 格式问题
【发布时间】：2013-04-09 20:42:09
【问题描述】：

我正在使用飞碟库将 xhtml 转换为 pdf。我在两页pdf之间的边界上遇到格式问题。如随附的屏幕截图所示，代表不同图例的颜色编码框会在 pdf 页面发生更改时被拆分。这看起来不太好。附件是一个示例 xhtml，其中包含生成 pdf 的代码示例。 xhtml 正确显示，没有任何格式问题。有没有其他人遇到过类似的问题？对此有什么可能的解决方案？

XHTML 输入文件

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>


table.diff {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 11px;
    border-collapse:collapse;
}
table.diff tbody {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff tbody th {
    font-family: Arial, Helvetica, sans-serif;
    background:#F5F5F5;
    font-size:11px;
    font-weight:normal;
    color:#999999;
    padding:.3em .5em .1em 2em;
    text-align:right;
    vertical-align:top;
}
table.diff thead {
    border-bottom:1px solid #BBC;
    background:#EFEFEF;
    font-family:Verdana;
}
table.diff thead th.texttitle {
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

table.diff td {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    padding: 2px 2px;
}

table.diff .empty {
    background-color:#D7F0FC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff .replace {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color:#FFD899;
}
table.diff .delete {
    background-color:#FF9900;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff .skip {
    background-color:#EFEFEF;
}
table.diff .insert {
    background-color:#ADCC70;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.diff th.author {
    text-align:right;
    border-top:1px solid #BBC;
    background:#EFEFEF;
}


.top-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-top: 1px solid #67BBE5;
}

table.diff .left-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #CCCCCC;
}

.bottom-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #67BBE5;
}

table.diff .left-bottom-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-left: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}

table.diff .bottom-border-grey {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-bottom: 1px solid #CCCCCC;
}
table .top-border-line {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0px;
    border-top: 1px solid #CCCCCC;
}
table .bottom-border-line {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0px;
    border-bottom: 1px solid #CCCCCC;
}
table.diff .legend-border {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border: 1px solid #CCCCCC;
}

</style>

</head>


<body>

<div id='legends' class='legends' style='width:100%;float:left'>
        <table width="100%" class="diff" style="background-color: rgb(235, 235, 235); ">
            <tbody>
                <tr>
                    <td width="50%">
                    </td>
                    <td width="100%" style="">
                        <table cellspacing="0" cellpadding="1" width="100%" class="diff">
                            <tbody>
                                <tr>
                                <td style="width: 20%;"><b>Legend : </b></td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="empty">Empty</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="delete">Deleted</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="replace">Modified</td>
                                <td style="text-align: center; width: 20%; border:1px solid;" class="insert">Inserted</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    </body>

</html>

【问题讨论】：

为什么要在每个类中重复你的font-family 声明而不是在整个页面中重复一次？

标签： flying-saucer

【解决方案1】：

您可以尝试使用page-break-inside css 属性来控制分页符。

fly-saucer 支持此属性，但在所有情况下都很难做到这一点，尤其是要避免极端情况。

在我的模板中，我通常使用这个：

tr{page-break-inside:avoid;}

另一种选择是使用page-break-before: always在需要的地方强制分页

【讨论】：