关于vue页面打印插件的使用_vue 打印designer

在我们编写页面的代码的时候，有时候我们需要使用页面的相关操作
先上效果图

其实这样的操作其实比较简单。

首先是需要在终端原本安装的node的环境下安装一个插件的
指令是：
npm install vue-print-nb --save

第二步是在前台的main.js文件下面添加所需要导入
import Print from ‘vue-print-nb’
Vue.use(Print); //注册

第三步是去相应的位置添加打印按钮以及给需要打印的view设置一个id

具体的按钮的使用方式其实有两种一种是如例子

<div class="symContainer" id="printArea">
      <div class="sym-tit">
        萧县永堌镇窦庄葡萄溯源平台
      </div>
      <ul class="symInfo">
        <li>产品名称：萧县永堌镇窦庄葡萧县永堌镇窦庄葡</li>
        <li>生产日期：2020-06-05</li>
        <li>企业电话：18888888888</li>
        <li>溯源码：1100K620174130</li>
      </ul>
      <div class="sym" id="qrcode" ref="qrcode"></div>
  </div>
    <el-button type="primary"  v-print="'#printArea'">打 印</el-button>
1
2
3
4
5
6
7
8
9
10
11
12
13

（此代码片段转至CSDN博主「wtyzky」的原创文章，原文链接：https://blog.csdn.net/wtyzky/article/details/106577789）
这种no方式是直接在按钮上面加了个"’#printArea’"。另外的方式就是没有加#的方式

 </div>
    <el-button type="primary"  v-print="printCons">打 印</el-button>
    methods: {
		goPrint(){
                console.log('打印')
                printJS({
                    printable: 'printCons',
                    type: 'html',

                    targetStyles: ['*'],
                    ignoreElements:['no-print','bc','gb']
                })
            }
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

（此代码片段转至CSDN博主「沉默的爆发」的原创文章，原文链接：https://blog.csdn.net/weixin_36965072/article/details/107566853）

由于使用打印的需求不同，可以设置自己的需求，这边的这个popTitle是设置打印的单据的表格名字的属性。
本文算是一个小总结文章，对自己写这一个打印按钮的操作进行总结，参考了两名前辈的代码。