vue vue-print-nb插件使用 修改页眉页脚
时间: 2023-12-31 14:21:47 浏览: 331
vue-print-nb是一个Vue.js插件,用于实现打印功能。如果你想使用vue-print-nb插件并修改页眉页脚,可以按照以下步骤进行操作:
1. 安装vue-print-nb插件。
2. 在Vue项目中引入vue-print-nb插件。
3. 在需要打印的组件中使用vue-print-nb插件。
4. 在打印时加入样式去除页眉页脚。
具体操作步骤如下:
1. 安装vue-print-nb插件:
```
npm install vue-print-nb --save
```
2. 在Vue项目中引入vue-print-nb插件:
```
import Print from 'vue-print-nb'
Vue.use(Print)
```
3. 在需要打印的组件中使用vue-print-nb插件:
```
<template>
<div>
<button @click="$print">打印</button>
<div class="print">需要打印的内容</div>
</div>
</template>
<script>
export default {
name: 'PrintDemo',
methods: {
$print() {
this.$print({
// 打印的内容
content: '.print',
// 打印的标题
pageTitle: '打印标题',
// 打印完成后的回调函数
callback: function () {
console.log('打印完成')
}
})
}
}
}
</script>
```
4. 在打印时加入样式去除页眉页脚:
```
<style media="print">
@page {
size: auto; /* auto is the initial value */
margin: 3mm; /* this affects the margin in the printer settings */
}
</style>
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)