Vue调用 window.open()使用window.print()打印指定的vue 组件
时间: 2023-09-22 14:08:24 浏览: 179
要在 Vue 中使用 `window.open()` 打开新窗口并调用 `window.print()`,可以按照以下步骤进行:
1. 首先,在 Vue 组件中定义一个方法,用于打开新窗口并在其中加载组件内容:
```
printComponent() {
// 创建一个新的窗口
const printWindow = window.open('', 'Print Window');
// 在新窗口中加载组件
printWindow.document.write('<html><head><title>Print Component</title></head><body>');
printWindow.document.write(this.$refs.printableComponent.innerHTML);
printWindow.document.write('</body></html>');
// 返回新窗口对象
return printWindow;
}
```
2. 在模板中添加一个按钮或链接,调用该方法并存储返回的窗口对象:
```
<template>
<div>
<div ref="printableComponent">
<!-- 这里是要打印的组件内容 -->
</div>
<button @click="print">打印</button>
</div>
</template>
<script>
export default {
methods: {
print() {
// 调用打印方法
const printWindow = this.printComponent();
// 在新窗口中调用打印方法
printWindow.print();
}
}
}
</script>
```
这样,点击按钮将会在新窗口中打印指定的组件内容。注意,在新窗口中加载组件时,需要使用 `$refs` 获取组件的 DOM 元素,例如上面的例子中使用了 `this.$refs.printableComponent.innerHTML` 获取了组件的 HTML 内容。
阅读全文