Angular自定义打印页面

功能需求
在项目开发过程中有一个功能是对表格进行打印，前端项目使用的是Angular框架构建，这里选择的是Print.js组件进行打印功能实现。

Print.js介绍
一个小型javascript库，用于帮助从web打印。有关文档和示例，请访问：https://printjs.crabbly.com/。

# npm安装print-js
npm install print-js --save

# 在项目中导入
import printJS from 'print-js'
1
2
3
4
5

打印代码
html

<div class="content" id="printTable" style="cursor: pointer">
  
div>

<div *nzModalFooter>
 <button
   nz-button
   nzType="primary"
   class="ok-button"
   (click)="onPrintButtonClick()"
 >
   打印
 button>
 <button
   nz-button
   nzType="default"
   class="cancel-button"
   (click)="onCancelButtonClick()"
 >
   取消
 button>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

typescript

onPrintButtonClick(): void {
  let dom: any = document.getElementById('printTable');
  printJS({
    printable: dom,
    type: 'html',
    css: 'assets/stock-in-print-view.css',
    scanStyles: false,
    style: '@page{ size:auto; margin: 0px 20px 0px 20px; }'
  });

  this.addBatchNumber();
}

onCancelButtonClick(): void {
  this.modal.destroy('cancel');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16