一、自定义模版打印功能：
<template><div v-if="printVisible"><div id="printBox"><slot></slot></div></div></template><script>export default {props:{printVisible:{type:Boolean,default:false,}},watch:{printVisible(data){if(data==true){this.$nextTick(()=>{this.onprint('printBox')})}},},methods:{onprint:function (ids){var el = document.getElementById(ids);var iframe = document.createElement('IFRAME');var doc = null;iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:0;top:0;');document.getElementById(ids).appendChild(iframe);doc = iframe.contentWindow.document;doc.write('<div >' + el.innerHTML + '</div>');doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();}}}</script>
注意：调用时需要手动销毁组件。
二、使用插件打印 vue-print-nb
参考地址：vue-print-nb - npmVue plug-in, print! Good!. Latest version: 1.7.5, last published: a year ago. Start using vue-print-nb in your project by running `npm i vue-print-nb`. There are 55 other projects in the npm registry using vue-print-nb./package/vue-print-nb
安装插件
npm install vue-print-nb
使用：
<template><div class="inventBox" id="print">我是打印内容</div><el-button type="primary" v-print="'#printMe'">打印</el-button></template><script>import print from 'vue-print-nb'export default {directives: {print },data() {return {}}}</script>
注：如果是全局注册Vue.use(print) ，则不需要在页面单独引用
参数说明：API
三、关于打印样式
1、单独新建一个print.css的样式文件，专门放打印样式。
2、在打印的当前页面引入这个文件，注意：需要在引入文件后标明print，如：
@import url('../../assets/css/print.css') print;
3、如果不想单独新建样式文件的话，可以直接在当前文件写样式，如：
<style>@media print {.Title{ padding-left: 16px; position: relative;font-size: 20px;}.Title::before{content: ''; position: absolute; display: inline-block; width:6px; height: 20px;background: #0099FF;top: 3px; left: 0;border-radius: 5px;}} </style>
效果：
小技巧：
需要分页的时候加上<div style="page-break-before:always;"><br /></div>这行代码就好了
page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。
page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。
page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。
page-break-after属性会将分页符号加在指定组件后，而非之前。
在Dom对象中pageBreakBefore属性
语法:
Object.style.pageBreakBefore=auto|always|avoid|left|right
<html><head><script type="text/javascript">function setPageBreak(){document.getElementById("p").style.pageBreakBefore="always";}</script></head><body><p>这是一个段落.</p><input type="button" onclick="setPageBreak()" value="哈哈" /><p id="p">这是第二个段落.</p></body></html>
