1

假设它是一个示例代码


<div id="print-div">
   <p>Lorem ipsum dolor sit amet page 1.</p>
     <ion-label>page break here</ion-label>
   <p>Lorem ipsum dolor sit amet page 2.</p>
</div>

我想打印这一部分，第一段在第一页，第二段在下一页。

在 .ts 文件中

printThis(){
   let backup = document.body.innerHTML;
   let divcontent = document.getElementById('print-div').innerHTML;
   document.body.innerHTML = divcontent;
   window.print();
   document.body.innerHTML = backup;
}

在CSS中

@media print {
    ion-label{
        page-break-before: always !important;
    }
}

但这不会在打印时破坏页面。所有数据都打印在一页中，如果内容大于一页，它仍然打印一页的数据。

我试过了

page-break-before: always;

page-break-after: always;

break-after: always;

但什么也没发生。

如果有人帮助我了解如何在 ionic.js 中使用分页符属性。我会非常感谢。

4

2 回答 2

2

问题：

ion-content 组件有一个绝对定位的内部 div。由于 ionic 使用带有 shadow-root 的 web-components 并且定位未公开为 css 变量，因此无法使用 css 样式表设置此样式属性。但是：分页符不适用于绝对定位的元素w3schools

解决方案：

使用 JS 操作 shadow-root 并将定位设置为相对。github：离子打印测试

我遇到了同样的问题，并通过使用事件侦听器onbeforeprint和onafterprint. 这是一个带有角度的离子示例，但逻辑可以很容易地重构为反应或 vue。离子打印测试：问题

打印服务.ts

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class PrintService {
  constructor(@Inject(DOCUMENT) private document: HTMLDocument) {}

  init() {
    window.onbeforeprint = () => this.setPrintStyles(true);
    window.onafterprint = () => this.setPrintStyles(false);
  }

  private setPrintStyles(add: boolean) {
    this.document.querySelectorAll('ion-content').forEach((element) => {
      const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
      if (add) {
        scroll.style.position = 'relative';
      } else {
        scroll.style.removeProperty('position');
      }
    });
  }
}
于 2020-12-30T01:37:44.030 回答
0

对我来说添加这项工作。离子 4，角度 8

@media print {
    body {
      position: relative !important;
    }
}

https://medium.com/@Idan_Co/angular-print-service-290651c721f9

于 2021-05-04T04:34:12.873 回答