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

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

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
  1. <div id="header">
  2. <table>
  3. <tr>
  4. <td>
  5. <img width="80" src="https://simplesolution.dev/images/Logo_S_v1.png" />
  6. </td>
  7. <td>
  8. <h1>供应订单表格</h1>
  9. </td>
  10. </tr>
  11. </table>
  12. <div>
  13. <table>
  14. <tr>
  15. <td th:text="'日期: ' + ${#dates.format(order.date, 'dd/MM/yyyy')}" ></td>
  16. </tr>
  17. (...)
  18. </table>
  19. </div>
  20. </div>
  • 添加以下CSS以在每个页面上重复显示此内容
  1. @page {
  2. @top-center { content: element(header); }
  3. margin-top:10cm; /* 根据要重复显示的元素的大小调整此值 */
  4. /* you want to repeat on each page */
  5. }
  6. #header {
  7. position: running(header);
  8. }

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

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

  1. <table class="order">
  2. <thead>
  3. <tr>
  4. <th>物品编号</th>
  5. <th>描述</th>
  6. <th>数量</th>
  7. <th>单价</th>
  8. <th>总计</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. (...)
  13. </tbody>
  14. </table>

然后在表格上添加以下CSS

  1. .order {
  2. -fs-table-paginate: paginate;
  3. border-spacing: 0;
  4. }
英文:

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
  1. &lt;div id=&quot;header&quot;&gt;
  2. &lt;table&gt;
  3. &lt;tr&gt;
  4. &lt;td&gt;
  5. &lt;img width=&quot;80&quot; src=&quot;https://simplesolution.dev/images/Logo_S_v1.png&quot; /&gt;
  6. &lt;/td&gt;
  7. &lt;td&gt;
  8. &lt;h1&gt;Supply Order Form&lt;/h1&gt;
  9. &lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;/table&gt;
  12. &lt;div&gt;
  13. &lt;table&gt;
  14. &lt;tr&gt;
  15. &lt;td th:text=&quot;&#39;Date: &#39; + ${#dates.format(order.date, &#39;dd/MM/yyyy&#39;)}&quot;&gt;&lt;/td&gt;
  16. &lt;/tr&gt;
  17. (...)
  18. &lt;/table&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  • Add the following CSS to repeat this content on each page
  1. @page {
  2. @top-center { content: element(header); }
  3. margin-top:10cm; /* Adjust this value to the size of the element */
  4. /* you want to repeat on each page */
  5. }
  6. #header {
  7. position: running(header);
  8. }

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;.

  1. &lt;table class=&quot;order&quot;&gt;
  2. &lt;thead&gt;
  3. &lt;tr&gt;
  4. &lt;th&gt;Item #&lt;/th&gt;
  5. &lt;th&gt;Description&lt;/th&gt;
  6. &lt;th&gt;Quantity&lt;/th&gt;
  7. &lt;th&gt;Unit Price&lt;/th&gt;
  8. &lt;th&gt;Total&lt;/th&gt;
  9. &lt;/tr&gt;
  10. &lt;/thead&gt;
  11. &lt;tbody&gt;
  12. (...)
  13. &lt;/tbody&gt;
  14. &lt;/table&gt;

And then add the following CSS on the table

  1. .order {
  2. -fs-table-paginate: paginate;
  3. border-spacing: 0;
  4. }

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:

确定