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

一、vue-print-nb

1.安装

官方安装及使用文档：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

    
打印内容

打印

3.2.使用printObj

• template

Print local range
 

  
葫芦娃，葫芦娃
  
一根藤上七朵花 

• script

export default {
    data() {
        return {
            printObj: {
              id: "printMe",
              popTitle: 'good print',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: ''
            }
        };
    }
}

缺点：
只能打印可见区域，不能分页打印

二、vuePlugs_printjs

1. 下载插件

插件地址：https://github.com/xyl66/vuePlugs_printjs

image.png

下载print.js后将其放入plugins文件夹下

|--根目录
|--|--src
|--|--|--plugins
|--|--|--|--print.js

2.main.js中全局引入

import Print from '@/plugs/print'
Vue.use(Print) // 注册

3.页面中使用

使用ref

• template

• script

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

---

参考文档网址：

vue实现打印功能的两种方法