Html2pdf分页样式处理包含行合并和列合并

最新推荐文章于 2024-09-29 22:03:05 发布
最新推荐文章于 2024-09-29 22:03:05 发布
阅读量2k 收藏 7
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuaYu_AI/article/details/111581668
版权

最近怎么老写页面。。。。。。

样式：中间行会遍历打印

要求：分页时行不会被从中间切断，表格宽度可以按需调节。

中途遇到问题

  • 由于中间使用了行合并使用tr标签page-break-inside: avoid !important;无效，会将合并的两行割裂。
  • 直接设置td宽度，由于行合并导致部分宽度失效。

问题图片

                                                                                                                                                                                           图1

                                                                                                                                                                                            图2 

总结

最终使用三个table并且table标签使用page-break-inside: avoid !important;循环遍历中间table不会割裂table。

表格样式固定

  • 使用第一行设置宽度，并且设置第一样高度为0，已通过。
  • 咨询前端使用<colgroup>和<col width='3%'>固定样式发现在转为pdf时样式失效，待找原因。

最终效果图

代码验证可行

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Template</title>
  <style type="text/css">
    table {
      border-collapse: collapse;
      -fs-table-paginate: paginate;
      table-layout: fixed;
      page-break-inside: avoid !important;
      width: 100%;
    }

    tr,
    td {
      word-wrap: break-word;
      word-break: break-all;
      border: 1px #000000 solid;
    }

    body {
      margin: 5px;
      padding: 0;
      font-size: 13px;
    }
  </style>

<body>
  <table>
    <tbody>
      <tr>
        <td width="3%" rowspan="2">Sr No</td>
        <td width="9%" rowspan="2">Part No</td>
        <td width="9%" rowspan="2">HSN/SAC</td>
        <td width="4%" rowspan="2">Qty</td>
        <td width="3%" rowspan="2">Unit</td>
        <td width="9%" rowspan="2">Rate</br>(per item)</td>
        <td width="9%" rowspan="2">Taxable</br>value</td>
        <td width="9%" colspan="2">IGST</td>
        <td width="9%" colspan="2">CGST</td>
        <td width="9%" colspan="2">SGST</td>
        <td width="9%" colspan="2">Compensation Cess</td>
        <td width="9%" colspan="2">Refund to be claimed</td>
        <td width="9%" rowspan="2">Total Value</td>
      </tr>
      <tr>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
      </tr>
    </tbody>
  </table>
  <table style="border-spacing:0;margin-top:-1px;margin-bottom:-1px;border-top:0px">
    <tbody>
      <tr style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px">
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='3%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='9%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='9%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='3%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='9%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='9%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='4.5%'></td>
        <td style="border:0;padding:0;height:0;margin-top:-1px;margin-bottom:-1px" width='9%'></td>
      </tr>
      <tr>
        <td rowspan="2" width="3%">${itemx.BillingItemNumber}</td>
        <td rowspan="2" width="9%">${itemx.govDummyNumber}</td>
        <td colspan="16" text-align="left">Lease Rental Charges for
          ${itemx.DummyNumber} ${itemx.SKUName}
        </td>
      </tr>
      <tr>
        <td>${itemx.controlCode}</td>
        <td>${itemx.qty}</td>
        <td>EA</td>
        <td>${itemx.unitprice}</td>
        <td>${itemx.totalCharge}</td>
        <td>${itemx.taxRate0}&nbsp;%</td>
        <td>${itemx.tax0}</td>
        <td>${itemx.taxRate1}&nbsp;%</td>
        <td>${itemx.tax1}</td>
        <td>${itemx.taxRate2}&nbsp;%</td>
        <td>${itemx.tax2}</td>
        <td>${itemx.taxRate3}&nbsp;%</td>
        <td>${itemx.tax3}</td>
        <td>${itemx.taxRate4}&nbsp;%</td>
        <td>${itemx.tax4}</td>
        <td>${itemx.amount}</td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <tr style="border:0;padding:0;height:0">
        <td style="border:0;padding:0;height:0" width='3%'></td>
        <td style="border:0;padding:0;height:0" width='9%'></td>
        <td style="border:0;padding:0;height:0" width='9%'></td>
        <td style="border:0;padding:0;height:0" width='4%'></td>
        <td style="border:0;padding:0;height:0" width='3%'></td>
        <td style="border:0;padding:0;height:0" width='9%'></td>
        <td style="border:0;padding:0;height:0" width='9%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='4.5%'></td>
        <td style="border:0;padding:0;height:0" width='9%'></td>
      </tr>
      <tr style="margin-top:-1px;">
        <td colspan="6">Total</td>
        <td>${HtmlInvoice.totalCharge[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax1[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax2[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax3[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax4[1]}</td>
        <td>&nbsp;${HtmlInvoice.totalAmount[1]}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

代码咨询前端，转pdf时有问题，但html正常

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Template</title>
  <style type="text/css">
    table {
      border-collapse: collapse;
      -fs-table-paginate: paginate;
      table-layout: fixed;
      page-break-inside: avoid !important;
      width: 100%;
    }
    tr,td {
      word-wrap: break-word;
      word-break: break-all;
      border:1px #000000 solid;
    }
    body {
      margin: 5px;padding: 0;
      font-size: 13px;
    }
  </style>

<body>
  <table>
    <tbody>
      <tr>
        <td width="3%" rowspan="2">Sr No</td>
        <td width="9%" rowspan="2">Part No</td>
        <td width="9%" rowspan="2">HSN/SAC</td>
        <td width="4%" rowspan="2">Qty</td>
        <td width="3%" rowspan="2">Unit</td>
        <td width="9%" rowspan="2">Rate</br>(per item)</td>
        <td width="9%" rowspan="2">Taxable</br>value</td>
        <td width="9%" colspan="2">IGST</td>
        <td width="9%" colspan="2">CGST</td>
        <td width="9%" colspan="2">SGST</td>
        <td width="9%" colspan="2">Compensation Cess</td>
        <td width="9%" colspan="2">Refund to be claimed</td>
        <td width="9%" rowspan="2">Total Value</td>
      </tr>
      <tr>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
        <td width="5%">Rate</td>
        <td width="4%">Amt</td>
      </tr>
    </tbody>
  </table>
  <table
    style="border-spacing:0;margin-top:-1px;margin-bottom:-1px">
    <tbody>
      <colgroup>
        <col width='3%'>
        <col width='9%'>
        <col width='9%'>
        <col width='4%'>
        <col width='3%'>
        <col width='9%'>
        <col width='9%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='9%'>
      </colgroup>
      <tr>
        <td width="3%" rowspan="2">${itemx.BillingItemNumber}</td>
        <td width="9%" rowspan="2">${itemx.govDummyNumber}</td>
        <td colspan="16" text-align="left">Lease Rental Charges for ${itemx.DummyNumber} ${itemx.SKUName}</td>
      </tr>
      <tr>
        <td>${itemx.controlCode}</td>
        <td>${itemx.qty}</td>
        <td>EA</td>
        <td>${itemx.unitprice}</td>
        <td>${itemx.totalCharge}</td>
        <td>${itemx.taxRate0}&nbsp;%</td>
        <td>${itemx.tax0}</td>
        <td>${itemx.taxRate1}&nbsp;%</td>
        <td>${itemx.tax1}</td>
        <td>${itemx.taxRate2}&nbsp;%</td>
        <td>${itemx.tax2}</td>
        <td>${itemx.taxRate3}&nbsp;%</td>
        <td>${itemx.tax3}</td>
        <td>${itemx.taxRate4}&nbsp;%</td>
        <td>${itemx.tax4}</td>
        <td>${itemx.amount}</td>
      </tr>
    </tbody>
  </table>
  <table>
    <tbody>
      <colgroup>
        <col width='3%'>
        <col width='9%'>
        <col width='9%'>
        <col width='4%'>
        <col width='3%'>
        <col width='9%'>
        <col width='9%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='4.5%'>
        <col width='9%'>
      </colgroup>
      <tr>
        <td colspan="6">Total</td>
        <td>${HtmlInvoice.totalCharge[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax1[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax2[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax3[1]}</td>
        <td>&nbsp;</td>
        <td>${HtmlInvoice.tax4[1]}</td>
        <td>&nbsp;${HtmlInvoice.totalAmount[1]}</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

 

HuaYu_AI
关注
html2pdf 不能识别标签,分页符和Alt标签在Itext7 html2pdf中不起作用(Page Break and Alt Tag not working in Itext7 html2pdf...
weixin_42519514的博客
06-09 738
分页符和Alt标签在Itext7 html2pdf中不起作用(Page Break and Alt Tag not working in Itext7 html2pdf)我正在尝试示例代码，如文档页面中所述但是，当我生成pdf时，没有设置alt标签，因此pdf辅助功能检查器会抱怨。 我还发现分页符不适用于给定的示例html页面。 有人可以帮我解决这两个问题吗？ 我的POM.xml具有以下依赖项。 ...
js 将html 某个dom 导出pdf，并处理分页
weixin_40507164的博客
02-10 2832
pdf html2PDF 分页
page-break系列属性与分页的控制
最新发布
读心悦
09-29 480
CSS中的page-break系列属性主要用于控制打印文档时的分页行为。这些属性包括和，它们允许开发者指定在哪些元素之前、之后或内部应该插入分页符，以优化打印文档的布局和可读性。
Html2Pdf dom导出PDF 内带A4分页判断(简单、易懂)
tangjunSino的博客
02-06 2521
前两个方法导出的时候会出现一些问题 下载预览的效果和实际html页面差距较大。比如html2canvas如果说版本号不为1.0.0文字会向上移 如图。分页截断在此借鉴了某金上一位大佬的文章，大家可转自查看。在查阅了网上论坛发生大部分都是使用1 2的这两种方案。2、html2canvas + jspdf(最常见)3、window.print() 浏览器自带的打印。截图 + jspdf 完美的解决了分页截断的问题。1、html2pdf.js 库。+ jspdf(本人使用)我使用的是​​​​​​​。
jspdf-html2canvas 自动分页 网页导出pdf 自动根据dom子节点的高度进行分页，避免dom的内容在分页的时候被截断
xiaozhi122的博客
08-10 1383
jspdf-html2canvas 网页导出pdf 自动根据dom子节点的高度进行分页，避免dom的内容在分页的时候被截断说明直接上代码 说明 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 要导出的内容用 .pdf 包裹 ，默认会以.pdf的子节点进行整块的高度计算，如果孙节点需要整块计算，孙节点的父节点上增加.pdf； 如果导出的内容里面有外部图片引用，需要配置外部图片支持跨域； 增加了 图片拖拽 功能，你可
itext html2pdf样式,IText7 html2pdf页脚CSS不起作用
weixin_34669755的博客
06-17 707
我无法在下面的HTML和CSS中看到结果PDF中的页脚 . 此代码适用于 IText version 2 .是否在 IText version 7 中更改了显示页眉和页脚的方式？或者我错过了新版本所需的任何配置？谢谢 .Java codepublic void createPdf(String src, String dest, String resources) throws IOExcept...
jspdf +html2canvas 导出pdf并实现分页
weixin_43770858的博客
05-12 1232
/ 获得该容器到文档顶部的距离。//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高。//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此。// 获得滚动条长度的一半。// 获得该容器的高。// 获得该容器的宽。//一页pdf显示html页面生成的canvas高度;//未生成pdf的html页面高度。
Aspose21.3全系列,excel转pdf,pdf分页合并
03-19
在本资源中，我们关注的是Aspose的21.3版本，特别是其在Excel到PDF转换以及PDF的分页和合并方面的功能。 首先，Aspose.Excel API允许开发者方便地将Excel工作簿转换为PDF格式。这种转换不仅保留了原始电子表格的...
Aspose excel转pdf、pdf拆分合并
12-06
Aspose 是一个强大的工具集，尤其在处理各种文件格式转换方面表现出色，包括Excel到PDF的转换、PDF的拆分和合并。这个压缩包文件可能包含了一些示例代码或者工具，用于演示如何利用Aspose库进行这些操作。下面将详细...
Java 使用iText7生成带页码的PDF文件（同时生成目录，但是不会合并两个PDF）
06-16
iText7是一款功能丰富的PDF处理库，它支持创建、编辑、解析和展示PDF文档。在Java中，我们可以利用iText7轻松地生成具有复杂结构的PDF文件，包括添加页码、创建目录等。首先，为了在Gradle项目中使用iText7，你需要...
压缩包内PDF合并工具使用指南
4. 分页控制：用户可以根据需要选择在合并过程中是否添加分页，以及分页的样式。 5. 导出选项：合并完成后的PDF文件可以导出到指定的文件夹或覆盖原有文件。 6. 安全性：合并工具会保护原始PDF文件不被修改，保证...
html2pdf(html转换pdf)
11-09
html2pdf(html转换pdf)， html2canvas+jspdf+pdfmake+jquery 页面直接html生成pdf文件，避免了，过多人下载pdf，消耗服务器资源的一个解决方案。如果并发量大的情况下，很好的解决了服务器的压力。 自己研究了好长时间终于搞定了
html2pdf_中文
06-10
PHP中,htm导出成pdf..........
实现html 页面下载为pdf文件(html2pdf)
03-17
JS 实现web页面下载为pdf文件，无需和后台交互，解决下载清晰度问题，解决分页问题；这次开发项目时，甲方服务器没有打印机，要求加的功能，自己费了很多时间收集资料研究，最后集成的代码；方便以后使用。希望对有需要的小伙伴有帮助。
html转pdf(带样式)、网页打印神器
05-27
html转pdf(带样式)、网页打印神器。可以实现网页的定制化打印功能，还可以实现html转pdf，并且能保留样式。
html to pdf table跨页,利用wkhtmltopdf(thead)将网页导出为pdf方法；以及存在表格图片被分页打断的问题解决方法-Go语言中文社区...
weixin_36183642的博客
06-17 1409
1、将html文件转为pdf文件的函数：html_path-----html路径；pdf_path-----pdf路径bool HtmlToPdf(QString html_path, QString pdf_path){QFile::remove(pdf_path);int result = 0;wkhtmltopdf_global_settings * gs;wkhtmltopdf_objec...
html下载pdf代码,实现手动分页
前端劝退工程师
05-25 1714
<script> /** * @param html { String } DOM树 * @param isOne { Boolean } 是否为单页 默认 否(false) * @return 文件 {pdf格式} */ 'use strict' import * as jsPDF from 'jspdf' import html2canvas from 'html2canvas' export default async (html, isOne) => { let
html2pdf
dqswuyundong的专栏
08-28 1199
1.下载地址： https://wkhtmltopdf.org/downloads.html wkhtmltox-0.12.5-1.centos6.x86_64.rpm 2.安装 yum install wkhtmltox-0.12.5-1.centos6.x86_64.rpm  -y 3.使用 wkhtmltopdf [选项] 文件源地址 文件目标地址 wkhtmltopdf http:...
html2pdf 不能识别标签,分页符和Alt标签在Itext7 HTML2PDF不工作
weixin_39620151的博客
06-09 302
然而，当我生成PDF，而alt标签没有设置，因此PDF可访问性检查器抱怨。我也发现分页符不能从给定的html页面中工作。有人可以帮我解决这两个问题吗？我的POM.xml具有以下依赖关系。我已经创建了上述文章中提到的确切文件并复制了代码。com.itextpdfitext7-core7.0.2pomcom.itextpdfhtml2pdf1.0.0itextiText Repository - re...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值