html - 强制打印不会自动中断属性

Question

我正在 Angular 中创建一个页面，该页面打印存储在变量中的一些数据。

我遵循了本指南：https ://medium.com/@Idan_Co/angular-print-service-290651c721f9

我设置的内容作为一个大的 HTML 字符串从 API 接收，我将其设置为 INNER HTML 到一个 div 中。

我遇到的问题是我的内容不会自动打破页面，即使使用属性：

page-break-inside: auto;

正如你在这里看到的：

我想在每一页上都有一个页眉、页脚和从上一页“破坏”的内容。似乎内容被隐藏了，它只显示第一页。

这是我的布局页面：

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <router-outlet></router-outlet>
</div>

<div class="footer">
  <h2 class="footer-title">Footer</h2>
</div>

这是我的内容页面

<div [innerHTML]="content"></div>

有人知道我如何强制页面中断吗？

谢谢 ！

标签： htmlcssangularprintingpage-break-inside

Answer 1

通过添加我的 styles.css 来修复它：

  * { overflow: visible !important; min-height: max-content !important; max-height: max-content !important; }