Vue打印一个页面的方法

1.js原生的打印api

// 设置一个button触发打印
<button @click="print">点击我打印整个页面</button>


// 原生方法
print(){
    window.print()
}

// 还可以配合媒体查询来配置打印状态下页面的布局

@media print and (其他条件，例如max-width:1024px){

    .className{
    
        //在这里的样式只有在打印这个页面时才会生效
    }

}

2.npm-print-nb插件打印方法

1.下载插件 vue2 version : npm i vue-print-nb --save vue3 version : npm i vue3-print-nb --save

2.导入并全局注册 vue2 version:

//在main.js中全局注册
import Print from 'vue-print-nb'
Vue.use(Print)

// 声明一个自定义属性
directives:{
    print
}

vue3 version:

//在main.js中全局注册
import print from 'vue3-print-nb'
app.use(print)

//
directives:{
    print
}

如果想打印整个页面 直接创建一个按钮，加上自定义函数v-print

<button v-print>print the entire page</button>

如果想打印局部的页面 可以给盒子加上一个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>

// 因为id选择器是一个字符串，所以需要加上''
<button v-print="'#printMe'">打印局部</button>
```