【Vue】插件:四、vue-print-nb或vuePlugs_printjs实现打印功能

一、vue-print-nb

官方安装及使用文档: https://www.npmjs.com/package/vue-print-nb

npm install vue-print-nb --save

2.main.js中全局引入

import Print from 'vue-print-nb'
Vue.use(Print); 

3.页面中使用

3.1.使用id

  • template
  • <div id="printMe" >
        <p>打印内容</p>
    <button v-print="'#printMer'">打印</button>
    

    3.2.使用printObj

  • template
  • <button v-print="printObj">Print local range</button>
    <div id="printMe" style="background:red;">
      <p>葫芦娃,葫芦娃</p>
      <p>一根藤上七朵花 </p>
    
  • script
  • export default {
        data() {
            return {
                printObj: {
                  id: "printMe",
                  popTitle: 'good print',
                  extraCss: 'https://www.google.com,https://www.google.com',
                  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
    只能打印可见区域,不能分页打印

    二、vuePlugs_printjs

    1. 下载插件

    插件地址:https://github.com/xyl66/vuePlugs_printjs
    <p>打印内容</p> <p class="no-print">非打印内容 方法1:添加no-print样式类</p> <p class="className">非打印内容 方法2:自定义类名</p> <button @click="print()">打印</button> </template>

  • script
  • print(){
        this.$print(this.$refs.print,{'no-print':'.className'});