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
<div id="printMe" >
    <p>打印内容</p>
</div>
<button v-print="'#printMer'">打印</button>
3.2.使用printObj
<button v-print="printObj">Print local range</button>
 
<div id="printMe" style="background:red;">
  <p>葫芦娃,葫芦娃</p>
  <p>一根藤上七朵花 </p>
</div>
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"/>'
            }
        };
    }
}

4.样式

在这里插入图片描述

5.缺点

只能打印可见区域,不能分页打印

Logo

前往低代码交流专区

更多推荐