首页Vue调用 window.open()使用window.print()打印指定的vue 组件

Vue调用 window.open()使用window.print()打印指定的vue 组件

时间: 2023-09-22 12:08:24 浏览: 185

要在 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 内容。

阅读全文