程序员的自我修养.png

前言

关于vue调用浏览器的打印功能、一篇文章就够了！最近工作过程中，产品提了一个需求，想要把项目中的聊天记录打印出来（页面中有很多的元素，聊天记录只是其中的一部分）。一开始觉得功能简单，只要调用浏览器的print()就行，事实证明，调用浏览器的print是打印整个页面的内容，那么就违背了产品定义的需求。做还是不做？不做？研发能力不行。做？脑子瓦特！

最终，经过一系列的调研，查询到了vue-print-nb一款用于vue打印，快捷，方便，简单的组件。

接下来给大家介绍vue如何利用vue-print-nb实现打印功能，并切针对在实现过程中遇到的问题。

一、安装 vue-print-nb

vue-print-nb是npm的依赖包根据vue版本不同需要安装不同的依赖

Vue2.0版本安装方法：

npm install vue-print-nb --save
// 在main.js文件中引入并全局挂载
import Print from 'vue-print-nb'
Vue.use(Print);

Vue3.0版本安装方法：

npm install vue3-print-nb --save
// 引入并全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

二、v-print API（参数设置）

三、代码应用

在线演示demo：https://power-kxlee.github.io/vue-print-nb/dist/index.html

使用方法：

打印整个页面

<button v-print>打印</button>

打印部分元素

 <div id="printMe">   
     <div>打印此处</div>
     <div>1111</div>
     <div>2222222</div>
 </div>

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

id必须是唯一的，v-print绑定的就是需要打印的元素

打印网址：

打印指定的URL网址（确保URL是同源策略）

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

export default {
    data() {
        return {
            printObj: {
              url: 'http://localhost:8080/'
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

打印异步网址

异步获取网址并且打印

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

export default {
    data() {
        return {
            printObj: {
              asyncUrl (reslove, vue) {
                setTimeout(() => {
                  reslove('http://localhost:8080/')
                }, 2000)
              },
              previewBeforeOpenCallback (vue) {
                console.log('正在加载预览窗口')
              },
              previewOpenCallback (vue) {
                console.log('已经加载完预览窗口')
              },
              beforeOpenCallback (vue) {
                console.log('打开之前')
              },
              openCallback (vue) {
                console.log('执行了打印')
              },
              closeCallback (vue) {
                console.log('关闭了打印工具')
              }
            }
        };
    }
}

通过reslove返回你想要打印的网址

四、可能会遇到的问题

在开发过程中，我们很有可能会遇到写的css样式在打印中失效、是因为浏览器打印样式不能配合scss和less使用，我们只需要吧样式写在style中就可以。

其次在previewBeforeOpenCallback、previewOpenCallback、beforeOpenCallback、openCallback、closeCallback方法中vue参数只是当前被调用的实例、并不能操作demo。

浏览器预览窗口打开之后数据就不会再重新渲染，我们之能在v-print="'#printMe'"之前，将数据渲染完成。

在线演示demo：https://power-kxlee.github.io/vue-print-nb/dist/index.html

结尾

vue-print-nb一款用于vue打印，快捷，方便，简单的组件，需要的小伙伴可以参考在线演示demo。

来源：https://github.com/Power-kxLee/vue-print-nb