【VUE】vue使用print-js插件实现打印功能_printjs @page

1、安装

npm install print-js --save
或
yarn add print-js

2、页面引用

import print from 'print-js'
1

3、页面定义容器

<div id="printMe">
	<!-- 要打印的内容 如二维码 -->
	<div id="qrCode" ref="qrCode" class="qrcode"></div>
</div>

<a-button type="primary" @click="handleOk()">确定打印</a-button>
1
2
3
4
5
6

4、方法中使用

handleOk() {
      //执行打印
      const style = '@page {margin:0 10mm};' //可选-打印时去掉眉页眉尾
      printJS({
        printable: 'printMe', // 标签元素id
        type: 'html',
        header: '',
        targetStyles: ['*'],
        style
      })
      //printJS各个配置项
      //printable:要打印的id。
      //type:可以是 html 、pdf、 json 等。
      //properties:是打印json时所需要的数据属性。
      //gridHeaderStyle和gridStyle都是打印json时可选的样式。
      //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
      //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
      //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
      //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
      //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我的文章-【VUE】vue使用QrCode插件实现生成二维码