记vue的几种打印

第一种: window.print()

打印当前页面:

function printpage(){
    window.print();
}

这种方法的坏处就是 默认打印整个页面,不能打印局部页面

第二种:vue-print-nb

安装依赖

npm i vue-print-nb

在main.js引入

import Print from 'vue-print-nb'

Vue.use(Print); //注册

现在就可以使用了

<div id="printTxt" >

　　　　<p>窗前明月光</p>

　　　　<p>疑似地上霜</p>
        
        <p>举头望明月</p>

        <p>低头思故乡</p>
</div>

<button v-print="'#printTxt'">打印</button>

 除了绑定id,还可以配置对象

<button v-print="printObj">打印</button>

printObj: {
  id: "printTest", //绑定打印区域的id
  popTitle: "抄单打印", //内容标签，可以设计页眉
  //调用打印工具前的回调函数
  beforeOpenCallback(vue) {
    vue.printLoading = true;
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    vue.printLoading = false;
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
},

第三种 print.js

安装print.js

npm install print-js --save

在需要打印的页面引入print.js

 import print from 'print-js'

创建打印html模板

//打印区域div
<div id="printBox">
    
　　　　<p>窗前明月光</p>

　　　　<p>疑似地上霜</p>
        
        <p>举头望明月</p>

        <p>低头思故乡</p>
</div>

<button  @click="printBox">打印</ button>

在methods中添加事件函数

printBox() {
        print({
          printable: 'printBox',	//打印区域id
          type: 'html',		//打印类型是html
        })
    },

文档参考:https://printjs.crabbly.com/

总结:这三种方法基本能满足日常打印需求,各有好坏,按需使用,项目遇到,写写经验