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

最新推荐文章于 2024-05-23 14:28:15 发布
最新推荐文章于 2024-05-23 14:28:15 发布
阅读量1.8k 收藏 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
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2+html2pdf下载PDF,PDF分页切割
Queen-Shir的博客
02-01 998
【代码】vue2+html2pdf插件实现把页面下载成PDF文件。
html转pdf分页问题终极解决方案 k-htmlpdf
qq_44146665的博客
06-23 2547
jspdf分页有个比较不好的地方就内容过长的时候虽然会虽然能做到分页，但是会把内容给截断，解决思路是给每个可能会被截断元素加上类，然后动态的计算该元素的位置是否在下一页和上一页之间，如果在的话就添加一个空白元素把这个元素给挤下去，这样就能实现了 ......
table打印分页问题解决
qq_39037897的博客
06-23 2438
1.table设置border: none； 2.tr设置page-break-inside:avoid;// 防止table数据太多，tr分页错乱 3.td设置border: 1px solid #000;// 防止部分分页的tr边框线没有 .checkprint-table { margin-top:10px; display: table; width: 960px; font-family: 仿宋 !important; font-size: 22px; text-align: left; bord
前端将内容导出为PDF（html2pdf）
最新发布
weixin_44207805的博客
05-23 523
3.在 exportToPdf 方法中,我们使用 html2pdf.js 库将 $refs.printContent 引用的 DOM 元素导出为 PDF 文件。同时,我们还添加了一个 div 元素,用于包含需要导出为 PDF 的内容,并使用 ref 属性标记它。需要注意的是,html2pdf.js 是一个第三方库,可能会有一些功能限制或兼容性问题。在 Vue.js 中,可以使用第三方库来将打印的内容导出为 PDF 文件。1.我们引入了 html2pdf.js 库。
推荐开源项目：Html2Pdf - 高效的HTML到PDF转换器
gitblog_00025的博客
05-13 344
推荐开源项目：Html2Pdf - 高效的HTML到PDF转换器 项目地址:https://gitcode.com/spipu/html2pdf 在日常工作中，我们经常需要将网页内容或HTML文档转化为PDF格式，以方便打印或长久保存。这就是为什么我们要向您推荐一个强大的PHP库——Html2Pdf。这个开源项目能够帮助您轻松地完成从HTML到PDF的转化，且兼容PHP 5.6到8.2版本。 项目...
为什么rowspan换行符会没有用
weixin_44638167的博客
08-24 2593
首先:rowspan是跨行符, <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>合并单元格</title> </head> <body> <table border="1"> <!-- colspan 单元格跨列 --> <thead> <tr> <t
java 解决Html table的rowspan问题(osc处女作)
weixin_34049032的博客
11-21 586
2019独角兽企业重金招聘Python工程师标准>>> ...
Html2Pdf dom导出PDF 内带A4分页判断(简单、易懂)
tangjunSino的博客
02-06 1672
前两个方法导出的时候会出现一些问题 下载预览的效果和实际html页面差距较大。比如html2canvas如果说版本号不为1.0.0文字会向上移 如图。分页截断在此借鉴了某金上一位大佬的文章，大家可转自查看。在查阅了网上论坛发生大部分都是使用1 2的这两种方案。2、html2canvas + jspdf(最常见)3、window.print() 浏览器自带的打印。截图 + jspdf 完美的解决了分页截断的问题。1、html2pdf.js 库。+ jspdf(本人使用)我使用的是​​​​​​​。
前端实现打印预览功能以及page-break-inside属性解决打印换行问题（打印预览表格或文字被分割开）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-18 1万+
遇到的问题： 打印预览的时候表格被分割了，就是一共两页而其中一行显示在不同的两个页面。如下图：
page-break-after/page-break-inside/page-break-before不起作用
大雾起了清晨
03-13 789
之前在使用itext7，html转pdf功能的时候，在table中设置了page-break-after样式不起效果。，才能得到期望效果；
ITEXT:utils-html2pdf-server工具包优化
Lee1243的博客
10-13 285
优化点1：首字母不能为标点符 优化点2：数字不做分割 定位：com.itextpdf.html2pdf.css.apply.util.FontStyleApplierUtil#applyFontStyles // 如果设置了强制换行的属性 则 修改相关属性 换行 if ("break-all".equalsIgnoreCase(cssProps.get("word-break")) && "break-word".equalsIgnor
html2pdf(html转换pdf)
11-09
html2pdf(html转换pdf)， html2canvas+jspdf+pdfmake+jquery 页面直接html生成pdf文件，避免了，过多人下载pdf，消耗服务器资源的一个解决方案。如果并发量大的情况下，很好的解决了服务器的压力。 自己研究了好长时间终于搞定了
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库进行这些操作。下面将详细...
.net core 纯html文本 通过wkhtmltopdf 导出pdf分享,多页
10-21
当需要生成多页PDF时，你可以将多个HTML文件合并成一个HTML文档，或者使用链接标签（如`<link>`）和脚本（如`<script>`）来分页。例如，你可以创建一个包含多个`<div>`的HTML，每个`<div>`代表一页内容，然后在CSS中...
Quite Imposing Plus 3.0.zip ，PDF排版插件
03-04
PDF排版插件在IT行业中扮演着至关重要的角色，特别是在文档处理和出版业。"Quite Imposing Plus 3.0.zip" 是一个专门针对PDF文件的增强工具，它提供了丰富的功能，帮助用户进行高效且精确的PDF排版工作。这款插件的...
mpdf html to pdf
12-21
- **分页和页眉页脚**：可以自定义页眉和页脚内容，以及设置分页样式。 **4. 版本更新** mPDF的最新版本6.0引入了许多改进和新特性，包括性能优化、新的图像处理功能、更好的错误处理以及对更多CSS3特性的支持。...
在Vue中，如何将页面直接转成PDF并下载？
m0_46219714的博客
03-27 2629
vue页面转pdf
element 表格动态合并行和列
12-18
element-ui是一个基于Vue.js的桌面端UI组件库，它提供了丰富的组件和功能，包括表格组件。在element-ui的表格组件中，可以实现动态合并行和列的功能。 动态合并行和列是指根据特定条件，将相邻的单元格合并成一个大单元格。在element-ui的表格组件中，可以通过使用scoped slot来实现动态合并行和列。 对于行的合并，可以通过使用`slot-scope`来自定义每一行的内容和样式。在`slot-scope`中可以根据条件判断是否需要合并当前行和前一行的某些单元格。如果需要合并，可以通过设置合适的`rowspan`属性来实现行的合并。 对于列的合并，可以通过使用`table-column`组件的`column-key`属性来指定需要合并的列。在`table-column`中可以使用`slot-scope`来自定义每一列的内容和样式。在`slot-scope`中也可以根据条件判断是否需要合并当前列和前一列的某些单元格。如果需要合并，可以通过设置合适的`colspan`属性来实现列的合并。 element-ui的表格组件还提供了其他一些常用的功能，如排序、筛选、分页等。可以根据实际需求，结合以上提到的动态合并行和列的功能，灵活地使用element-ui的表格组件来实现各种复杂的表格布局和交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值