angular打印功能--print.js插件之前尝试了好⼏个打印功能，但都有各种问题，综合下来，print.js这个插件的问题最少我感觉，print.js最⼤的便利就是可以引⼊ 打印css⽂件
步骤：
1、下载插件
npm install print-js --save
2、引⼊到⽂件
哪个⽂件需要打印，就引⼊到哪个⽂件
import printJS from 'print-js'
这⾥引⼊时会报错，报错如下：
解决⽅法在下⾯，先把print.js插件流程写完
3、使⽤
html⽂件，要打印的内容
<div id="printTable" (click)="printSomething()" >
<div class="font">打印内容</div>css最新
</div>
ts逻辑
printSomething() {
this.dom = ElementById('printTable'); // 将要被打印的表格
printJS({
printable: this.dom,
type: 'html',
css: 'assets/view.css',
scanStyles: false,
});
}
css样式
.
font {
color: blue;
}
在这⾥写 打印css⽂件
当然，在html⽂件的⾥style样式是公⽤的结果
点击后
之所以页⾯显⽰蓝⾊，打印时是红⾊，就是因为页⾯的css⽂件与打印的css⽂件不是同⼀个。页⾯的css⽂件就是angular组件的css⽂件
打印需要的css⽂件是我们⾃⼰设定的，在红⾊⽅框⾥引⼊的css
解决之前的问题
有两个解决办法
1、加上这句代码：allowSyntheticDefaultImports:true
2、修改node_modules⾥下载的print-js⽂件
扩展打印分页
内容很多时，⼀个打印不完，需要分页打印。但分页的话，页⾯的页眉或页脚就没了，这是个问题
page-break-before
page-break-after
page-break-before和page-break-after CSS属性并不会修改⽹页在屏幕上的显⽰，这两个属性是⽤来控制⽂件的打印⽅式。
每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。
page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始⼀个新的打印页。
page-break-before若设定成left，则会插⼊分页符号，直到指定的组件出现在⼀个左边的空⽩页上。
page-break-before若设定成right，则会插⼊分页符号，直到指定的组件出现在⼀个右边的空⽩页上。
page-break-after属性会将分页符号加在指定组件后，⽽⾮之前。
1、分页打印
<div id="printTable" (click)="printSomething()" >
<div >我是封⾯</div>
<div >我是⽬录，你不知道我的内容有多长</div>
<div>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
<p>我是正⽂，我需要从⼀个新页⾯开始展⽰</p>
</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。