【关于调用浏览器打印工具】vue-print-nb

今天一个新需求,前端需要调用浏览器的打印工具

开始有点不知所措后来百度一看好像不是很难直接调用一个 vue插件就行 **
vue-print-nb**

所以就浅浅的记录一下

1.引入插件 npm install vue-print-nb --save
2.在main.js中引入
3.import Print from 'vue-print-nb'
4.Vue.use(Print)

<el-col :span="12" v-if="type !== 'add'">
            <el-form-item label="二维码:">
              <!-- <el-button
              type="primary"
              @click="getQrCode"
              v-if="!readonly"
              style="vertical-align: top"
              >生成</el-button
            > -->
            //  img图片必须要有一个唯一的id
           //   v-print="'#printqrcode'"   绑定id
              <el-image id="printqrcode" :src="formData.indexNumber" v-print="'#printqrcode'"
                style="width: 100px; height: 100px;cursor: pointer;" @click="prints" />
            </el-form-item>
 </el-col>
<script>

export default {
	data() {
		return{
		 print: {
	        id: 'printqrcode',
	        popTitle: '二维码',
	        extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
	        preview: true, // 是否启动预览模式，默认是false
	        previewTitle: '预览的标题', // 打印预览的标题
	        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
	        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
	        previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
	        previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
	        beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
	        openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
	        closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
	        clickMounted () { console.log('点击v-print绑定的按钮了！') },
	        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
	        // asyncUrl (reslove) {
	        //   setTimeout(() => {
	        //     reslove('http://localhost:8080/')
	        //   }, 2000)
	        // },
	        standard: '',
	        extarCss: ''
		    }
		}
	}
 methods:{
 	 prints() {
      var prints = document.getElementById('single-info');
      prints.popTitle = "二维码";
    }
   }
}
</script>


<style media="printTest">
@page {
    size: auto;
    margin: 3mm;
  }

  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  }

  body {
    border: solid 1px #ffffff;
    margin: 10mm 15mm 10mm 15mm;
  }
</style>