原生JS实现打印
浏览器自带window.print()可以拉起打印窗口，不过该窗口只能打印当前整个页面，如果想要打印指定元素，需要让元素充满页面。可以这样实现：
1
2
3
4
| const originalContent = document.body.innerHTML;
document.body.innerHTML = this.$refs.printContent.innerHTML;
window.print();
document.body.innerHTML = originalContent;
|
不过缺陷也很明显，很多时候组件会依赖外部的样式，将组件单独提出来占满页面容易丢失一些样式，需要在设计页面时就考虑这种情况。
还有一种使用iframe的方法：
1
2
3
4
5
6
7
8
| const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentWindow.document.write('<html><head><title>Print</title></head><body>' + this.$refs.printContent.innerHTML + '</body></html>');
iframe.contentWindow.document.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
|
代码直接拷贝，具体使用还需验证。
在vue中可以使用框架。
使用vue-print-nb实现打印
首先在项目中安装好插件，在main.js中注册插件，具体可在npmjs上参考。
注册成功后可以在组件上使用v-print指令，可以指定一个元素进行打印，可以传入一个obj进行配置。
1
2
3
4
5
6
| printObj: {
id: 'printMe',
popTitle: '打印标题',
preview: true,
}
|
更多配置可以参考官网
边距设置
两种方式都能使用媒体查询设置打印的参数：
1
2
3
4
5
6
7
8
9
| @media print{
@page{
margin:2.54cm 3.18cm;// 页边距，单位可以使用cm、mm
}
#pdfBox{
}
}
|
这里踩了一个坑，这里设置的边距，打印时边距选项必须选择默认才会应用此处的配置。
打印Base64格式
使用printJs插件，可以支持base64格式的打印。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import JsPDF from 'jspdf'
import printJs from 'print-js'
let pdf = new JsPDF('p','mm','a4');
pdf.text('hello world',10,10);
let pdfBase64 = pdf.output('datauristring').split(';base64,')[1];
printJs({
printable: pdfBase64,
type:'pdf',
base64: true,
})
|