将页眉、页脚和页码添加到转换为 PDF iText 7 的 HTML 页面

Question

大家好，提前感谢您的帮助。我正在学习 iText 7，并正在创建一个从 URL 中提取网页并将其转换为 PDF 的应用程序。我已经完成了非常基本的工作，即抓取页面，将其转换为 PDF，然后将其写入磁盘。我接下来要完成的是添加页眉和页脚以及y的第x页。我试过了：

        @media print {
        @page {
            size: 8.5in 5.5in portrait;
            margin-left: 0.5cm;
            margin-right: 0.5cm;
            margin-bottom: .5cm;
            padding-bottom: 3.5cm;
            background: #FFF;
        }

        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
    }

这似乎将页眉和页脚放在每一页上，尽管文档的最后一页将页脚放在最后一个元素出现的位置之后（不理想）。由于我正在抓取页面，因此我不确定如何添加页码和计数。所以我的问题是如何解决这个问题，即我应该坚持使用媒体查询，还是应该生成 PDF，通过使用某种类型的处理程序插入页眉和页脚的循环（或者我应该在创建初始文件）。我现在有一些关于分页的教程，但没有与转换网页相结合，所以我对如何继续感到困惑（也许是不必要的）。任何帮助将不胜感激。

我试过了：

        @media print {
        @page {
            size: 8.5in 5.5in portrait;
            margin-left: 0.5cm;
            margin-right: 0.5cm;
            margin-bottom: .5cm;
            padding-bottom: 3.5cm;
            background: #FFF;

        @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        }   
        }

        thead { display: table-header-group; }
        tfoot { display: table-footer-group; }
    }

但在 HTML 或转换后的 PDF 中不显示页码。我需要使用：thead { display: table-header-group; } tfoot { display: table-footer-group; } to force the header and footer to display on each page. Obviously I'm not handling this correctly, but don't know what to try next.

`

在此处输入代码

Answer 1

您需要页眉和页脚，但查看您的 CSS，我看不到您在任何地方定义页眉或页脚（<thead> 和 <tfoot> 用于表格，而不是用于页面）。您想为每个页面添加“第 X 页，共 Y”，但我没有看到您在任何地方定义该内容。

请阅读Chapter 2 的将 HTML 转换为 PDF 的教程。在其中一个示例中，您将看到：

@page {
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

这在每个页面的右下角定义了一个页脚，内容为“页面X of Y”，其中X 将是当前页面，Y 是总页面数。

阅读有关@page rule 的更多信息，您会发现您还可以定义@bottom-left、@bottom-center、@top-left 等等。

还要注意您使用@media print 的事实，这意味着如果您定义了正确的媒体查询，iText 只会查看这些括号之间的任何内容。请参阅教程的Chapter 3。

最终更新：

我从tutorial中提取了以下示例：C03E02_Print

public static void main(String[] args) throws IOException {
    File file = new File(TARGET);
    file.mkdirs();
    new Kmcnet().createPdf(BASEURI, SRC, DEST);
}

public void createPdf(String baseUri, String src, String dest) throws IOException { 
    ConverterProperties properties = new ConverterProperties();
    properties.setBaseUri(baseUri);
    MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.PRINT);
    properties.setMediaDeviceDescription(mediaDeviceDescription);
    HtmlConverter.convertToPdf(new FileInputStream(src), new FileOutputStream(dest), properties);
}

我拿了sxsw.html 页面，然后像这样更改了sxsw_print.css：

@page {
    @top-left {
        content: "HEADER";
    }
    @top-center {
        content: "READ THE TUTORIAL";
    }
    @top-right {
        content: "kmcnet";
    }
    @bottom-left {
        content: "FOOTER";
    }
    @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
    }
    @bottom-right {
        content: "The end";
    }
}

我运行了代码，结果如下：

OP，kmcnet，声称页面上没有“Page X of Y”，但如果仔细观察，您可以在中间看到“Page 1 of 2”和“Page 2 of 2”屏幕截图上的页面底部。此外，kmcnet 声称无法在页眉或页脚中添加客户名称，但如果您查看屏幕截图，您可以清楚地看到页面右上角的“kmcnet”。

然后我拿了movies2.html 文件，并像这样更改了内联CSS：

<style>
@media print {
    @page {
        @top-left {
            content: "HEADER";
        }
        @top-center {
            content: "READ THE TUTORIAL";
        }
        @top-right {
            content: "kmcnet";
        }
        @bottom-left {
            content: "FOOTER";
        }
        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
        }
        @bottom-right {
            content: "The end";
        }
    }
}
</style>

我在该 HTML 上运行了 C03E02_Print 示例，结果显示了类似的页眉和页脚：

原来的问题是：

接下来我要完成的是添加页眉和页脚以及y的第x页。

我认为我的回答和教程充分解释了如何做到这一点。不幸的是，OP坚持说我的答案不起作用，也不是教程中写的内容。

我会把这个问题作为题外话，更具体地说，作为一个无法重现的问题：