vue-print-nb打印在vue项目中的使用
时间: 2023-07-21 13:28:58 浏览: 350
要在Vue项目中使用`vue-print-nb`打印功能,你可以按照以下步骤进行操作:
1. 安装`vue-print-nb`插件
在终端中输入以下命令:
```
npm install vue-print-nb --save
```
2. 在Vue组件中引入`vue-print-nb`
在需要使用打印功能的Vue组件中,引入`vue-print-nb`插件:
```
import Print from 'vue-print-nb';
```
3. 使用`vue-print-nb`的打印功能
在Vue组件的methods中添加打印功能:
```
methods: {
print() {
// 打印的内容
let printContents = document.getElementById('print-section').innerHTML;
// 打印设置
let originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
// 开始打印
window.print();
// 恢复原始内容
document.body.innerHTML = originalContents;
}
}
```
在Vue组件的template中添加打印按钮,并绑定上面定义的print方法:
```
<template>
<div>
<div id="print-section">这是要打印的内容</div>
<button @click="print()">打印</button>
</div>
</template>
```
使用以上步骤,你就可以在Vue项目中使用`vue-print-nb`插件的打印功能了。
阅读全文