Question

我有一个视图，可以生成单个客户收据的HTML结构。这些收据图像可以具有不同的高度。如果上传PDF，我们会将其转换为图像以便于渲染，但希望在其父容器中显示每个页面。

<div class="expense-report">
  <table class="expenses"> /* Associated expenses table */</table>
    <ul class="receipt-list">
      <li class="receipt-block border-black multi">
        <div class="receipt-number">Receipt1</div>
        <img src="...path/to/image/page1" />
        <img src="...path/to/image/page2" />
        <img src="...path/to/image/page3" />
        <div>/* More receipt data if available */</div>
     </li>
     <li class="receipt-block border-black single">
       <div class="receipt-number">Receipt2</div>
       <img src="...path/to/image" />
       <div>/* More receipt data if available */</div>
     </li>
     <li class="receipt-block border-black single">
       <div class="receipt-number">Receipt3</div>
       <img src="...path/to/image" />
       <div>/* More receipt data if available */</div>
     </li>
   </ul>
</div>

我要求添加＆＃34;分页前＆＃34;或者＆＃34; page-break-after＆＃34;进入＆＃34;收据块＆＃34;因此，如果在打印/打印预览时图像对于页面上的剩余空白而言太大，则整个块将会断开。

所以，如果＆＃34; page1＆＃34;在我的例子中，它不适合它试图渲染的第一页，它会破坏整个＆＃34;收据块＆＃34;并把它放在一个新的页面，然后可以打破它的心脏欲望。同样，如果＆＃34;收据2＆＃34;和＆＃34;收据3＆＃34;它们是小收据，它们应该占用页面上的正确空间而不会中断（即没有分页符号）。

目前，＆＃34;收据块＆＃34;包装器在前一个块之后直接开始，但是图像页面中断，所以我最终得到了＃34; Receipt1＆＃34;在一个页面上，带有边框和一堆空白，直到它在下一页显示图像，当我决定在决定图像应该中断时打破整个块。

我尝试了几种更改显示样式的组合，添加了page-break-inside：避免使用所有元素，使用widows / orphans，更改溢出，将整个结构转换为表格布局等当我找到一个似乎有效的解决方案时，如果将打印布局切换为横向，它将恢复到相同的问题。

有没有办法动态检查图片是否在使用JavaScript的不同页面上，或者它是否会最终破坏它自己的页面，所以我可以在正确的项目上添加分页符？

似乎无法弄清楚如何获得这种行为，或者它是否可能？跨浏览器打印支持似乎被浏览器忽视和处理不同。

对此问题的任何解决方案都将不胜感激。谢谢！

在打印包含高于预期的图像的项目时动态创建分页符？

0 个答案: