vue实现浏览器打印功能 vue-print-nb

1.安装依赖:

npm install vue-print-nb --save

2.引入插件:

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

3.1 简单使用:

    <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>

3.2 配置其他选项:

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

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



        //data里的数据
        printObj: {
              id: "printMe", //要打印的dom的id值
              popTitle: '打印的顶部标题',
              extraCss: 'https://www.google.com', //附加连接
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>' //附加头
            }