Angular自定义打印页面

最新推荐文章于 2024-06-17 09:33:44 发布

编程课堂

最新推荐文章于 2024-06-17 09:33:44 发布

阅读量1k

点赞数

分类专栏： Angular 文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44917045/article/details/127978429

版权

Angular 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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

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

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

# 在项目中导入
import printJS from 'print-js'

打印代码
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>

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');
}