时间戳

首页 > 解决方案 > CSS @print 规则不会自动打破动态冗长内容的页面

html - CSS @print 规则不会自动打破动态冗长内容的页面

问题描述

我正在尝试在div其中添加动态内容后打印一个可能会非常冗长的内容，并且我目前已声明 CSS@print查询属性以在 A4 长度的纸上仅在我的 html 中打印此 div，

当内容长度短于 A4 页面的长度时，它可以正常工作并且效果很好，但是一旦内容长度超过 A4 长度，可打印版本仍然显示一页，并且它只捕获可以是的内容仅安装在 A4 页面内，其他以下批次正在剪裁。

我想在内容到达页面底部时自动中断页面。我尝试了几个小时，谷歌搜索和测试。（Chrome/Firefox/Opera 都显示相同的结果）

@media print {
  @page {
    size: 4.4in 11.69in;
    /* custom width which I use for printing */
    margin: 0 auto;
  }
  
  /* app-home is the parent component */
  app-root app-home>* {
    display: none !important;
    /*As I want to print only the div which is mentioned below */
  }
  
  /* app-preview component which holds the div to be printed */
  app-root app-home app-preview,
  app-root app-home app-preview>* {
    display: block !important;
    position: fixed;
    overflow: visible !important;
    break-inside: auto !important;
    break-after: auto !important;
  }
  
  /* div with class of canvas - The div to be printed */
  /* div with class of outer is a parent div */
  app-root app-home app-preview div.outer div.canvas {
    display: block !important;
    overflow: visible !important;
    break-inside: auto !important;
    break-after: auto !important;
  }
}

注意：内容div位于 Angular 8 应用程序的组件内部。+ 实际内容table在 this 里面div。提到的样式在主styles.css文件中。

Chrome中显示的打印预览 -Chrome 中的打印预览

其余的被剪裁而不是中断到另一页，因为它应该。知道我的代码有什么问题吗？

任何帮助，将不胜感激！

标签： htmlcssangular8page-breakcss-paged-media

解决方案

推荐阅读