如何使用iText、HTML和Thymeleaf创建带有循环徽标的PDF。

huangapple go评论79阅读模式
英文:

How to Create PDF with recurring logo using iText, HTML and thymeleaf

问题

I am making use of HTML, thymeleaf and flying-saucer-pdf

我正在使用HTML、Thymeleaf和飞翔器PDF。

I have the code at following link to convert html to pdf: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x

我在以下链接中有将HTML转换为PDF的代码:https://github.com/Naresh-Chaurasia/html-pdf-generation-1x

HTML: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/resources/pdf-templates/order-template.html

HTML:https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/resources/pdf-templates/order-template.html

Java To Convert HTML to PDF using iText: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/java/in/connect2tech/html/pdf/HtmlToPdfMain.java

使用iText将HTML转换为PDF的Java代码:https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/java/in/connect2tech/html/pdf/HtmlToPdfMain.java

Everything works fine and below is the sample PDF generated.

一切都运行正常,以下是生成的示例PDF。

Problem Statement: The problem arises when the record spans more than 1 page. I am not able to create the header in all the pages, as can be seen in the screenshot below, the records start without the header and logo.

问题陈述:当记录跨越多于1页时会出现问题。我无法在所有页面上创建标题,如下面的截图所示,记录在没有标题和徽标的情况下开始。

Question:How can I repeat the header logo on all the generated pdfs.

问题:如何在所有生成的PDF中重复标题和徽标。

Thanks for any pointers/help in advance.

在此提前感谢任何指导或帮助。

英文:

I am making use of HTML, thymeleaf and flying-saucer-pdf

I have the code at following link to convert html to pdf: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x

HTML: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/resources/pdf-templates/order-template.html

Java To Convert HTML to PDF using iText: https://github.com/Naresh-Chaurasia/html-pdf-generation-1x/blob/main/src/main/java/in/connect2tech/html/pdf/HtmlToPdfMain.java

Everything works fine and below is the sample PDF generated.

如何使用iText、HTML和Thymeleaf创建带有循环徽标的PDF。


Problem Statement: The problem arises when the record spans more than 1 page. I am not able to create the header in all the pages, as can be seen in the screenshot below, the records start without the header and logo.

Question:How can I repeat the header logo on all the generated pdfs.

Thanks for any pointers/help in advance.


如何使用iText、HTML和Thymeleaf创建带有循环徽标的PDF。

答案1

得分: 1

你需要使用CSS 2.0的分页媒体来定义HTML文档的页眉。

  • 创建一个包含要作为页眉重复显示的内容的div
<div id="header">
    <table>
        <tr>
            <td>
                <img width="80" src="https://simplesolution.dev/images/Logo_S_v1.png" />
            </td>
            <td>
                <h1>供应订单表格</h1>
            </td>
        </tr>
    </table>

    <div>
        <table>
            <tr>
                <td th:text="'日期: ' + ${#dates.format(order.date, 'dd/MM/yyyy')}" ></td>
            </tr>
           (...)
        </table>
    </div>
</div>
  • 添加以下CSS以在每个页面上重复显示此内容
@page {
    @top-center {  content: element(header);  }
    margin-top:10cm; /* 根据要重复显示的元素的大小调整此值 */
                     /* you want to repeat on each page              */
}
#header {
    position: running(header);
}

你也可能想要重复表格的标题。

为此,你需要将第一行放在<thead>中,并将内容放在<tbody>中。

<table class="order">
    <thead>
    <tr>
        <th>物品编号</th>
        <th>描述</th>
        <th>数量</th>
        <th>单价</th>
        <th>总计</th>
    </tr>
    </thead>
    <tbody>
        (...)
    </tbody>
</table>

然后在表格上添加以下CSS

.order {
    -fs-table-paginate: paginate;
    border-spacing: 0;
}
英文:

You have to use CSS 2.0 paged media to define a header on your HTML document.

  • Create a div which contains the content to be repeated as header
&lt;div id=&quot;header&quot;&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;img width=&quot;80&quot; src=&quot;https://simplesolution.dev/images/Logo_S_v1.png&quot; /&gt;
            &lt;/td&gt;
            &lt;td&gt;
                &lt;h1&gt;Supply Order Form&lt;/h1&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

    &lt;div&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td th:text=&quot;&#39;Date: &#39; + ${#dates.format(order.date, &#39;dd/MM/yyyy&#39;)}&quot;&gt;&lt;/td&gt;
            &lt;/tr&gt;
           (...)
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
  • Add the following CSS to repeat this content on each page
@page {
    @top-center {  content: element(header);  }
    margin-top:10cm; /* Adjust this value to the size of the element */
                     /* you want to repeat on each page              */
}
#header {
    position: running(header);
}

You will also probably want to repeat the header of the table.

For that, you need to put the first line in a &lt;thead&gt; and the content in a &lt;tbody&gt;.

&lt;table class=&quot;order&quot;&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th&gt;Item #&lt;/th&gt;
        &lt;th&gt;Description&lt;/th&gt;
        &lt;th&gt;Quantity&lt;/th&gt;
        &lt;th&gt;Unit Price&lt;/th&gt;
        &lt;th&gt;Total&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        (...)
    &lt;/tbody&gt;
&lt;/table&gt;

And then add the following CSS on the table

.order {
    -fs-table-paginate: paginate;
    border-spacing: 0;
}

huangapple
  • 本文由 发表于 2023年7月6日 19:38:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76628444.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定