vue的原生打印和插件打印简单用法

一、原生打印:

原生打印主要是通过调用window的print方法进行打印,不过这种方法不能打印我们只需要的一部分，而是打印整个页面；
print的而主要作用是：打开打印对话框打印当前文档。
语法：window.print()

原生打印用法：

1.给打印按钮绑定事件

<el-button @click="startPrint">原生打印</el-button>

2.在绑定的对应事件处调用print（）即可

startPrint() {
// 弹出打印页
  window.print()
}

二、插件打印

插件打印(vue2)*：鉴于浏览器给定的原生方法不能满足指定的打印需求，所以我们需要用到插件进行打印。这次演示用的打印插件是：vue-print-nb**，这个插件可以在npm，gitee,github上都可以找到。该插件不仅能打印本地内容，还可以打印网址，也可以进行打印预览;具体用法可在npm查看参考原作者文章：vue-print-nb

插件打印用法：

1.先下载安装插件

npm install vue-print-nb --save

2.安装完毕后，需要引入到vue实例中

import print from 'vue-print-nb'

//注册指令
export default {
  directives: {
    print
  },
}

3.需要打印哪部分，直接给包含的标签加一个id即可,然后在点击打印的地方用v-print=“绑定的id”，这样就可以打印你需要的部分啦！

    <div id="printMe" style="background:red;">
        <p>葫芦娃，葫芦娃</p>
        <p>一根藤上七朵花 </p>
        <p>小小树藤是我家 啦啦啦啦 </p>
        <p>叮当当咚咚当当　浇不大</p>
        <p> 叮当当咚咚当当 是我家</p>
        <p> 啦啦啦啦</p>
        <p>...</p>
    </div>

    <button v-print="'#printMe'">打印本地范围</button>