vue-print-nb iframe打印
时间: 2023-07-18 13:35:51 浏览: 314
好的,关于vue-print-nb中使用iframe打印的问题,可以参考以下步骤:
1. 安装vue-print-nb插件:
```
npm install vue-print-nb --save
```
2. 在需要打印的组件中引入vue-print-nb插件:
```javascript
import Print from 'vue-print-nb'
export default {
...
components: {Print},
...
}
```
3. 在需要打印的地方添加一个按钮或者其他触发事件:
```html
<template>
...
<button @click="print">打印</button>
...
</template>
```
4. 在需要打印的方法中使用vue-print-nb提供的方法:
```javascript
export default {
...
methods: {
print () {
// 打印的内容
let printContent = this.$refs.printContent
this.$print(printContent)
}
}
...
}
```
5. 在需要打印的地方添加一个`ref`属性:
```html
<template>
...
<div ref="printContent">
<!-- 打印的内容 -->
</div>
...
</template>
```
6. 在需要打印的组件中添加一个`iframe`元素:
```html
<template>
...
<iframe id="print" frameborder="0" width="0" height="0"></iframe>
...
</template>
```
这样就可以使用vue-print-nb插件中的`$print`方法来进行iframe打印了。
阅读全文