vue打印的功能打印指定区域

最新推荐文章于 2025-06-11 09:51:48 发布

苏苏(^_^)

最新推荐文章于 2025-06-11 09:51:48 发布

阅读量2.2k

点赞数 23

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_40980491/article/details/144723250

vue打印的功能打印指定区域

文章目录

前言
下面是一个实现的示例：
- Vue 组件代码：
解释：
可能遇到问题

前言

vue打印的功能打印指定区域

要在 Vue 中实现打印指定区域的功能，可以通过以下步骤：

指定要打印的区域：使用 ref 获取要打印的 DOM 元素。
打开打印对话框：通过 window.print() 来打开浏览器的打印对话框。
只打印指定区域：通过创建一个临时的 iframe 或者 window，然后将要打印的内容放到该区域中。

下面是一个实现的示例：

Vue 组件代码：

<template>
  <div>
    <div class="ptag" ref="printArea">
      <HangTagLabel :skuinfo="skuinfo"/>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skuinfo: {
        name: 'Product A',
        price: '100',
        description: 'A very nice product.'
      }
    };
  },
  methods: {
    print() {
      const printContents = this.$refs.printArea.innerHTML;  // 获取要打印的区域
      const originalContents = document.body.innerHTML;  // 保存当前页面的内容

      // 创建一个新的窗口
      const printWindow = window.open('', '', 'height=600,width=800');
      printWindow.document.write('<html><head><title>打印</title>');
      printWindow.document.write('<style>body{font-family: Arial, sans-serif;}</style>');  // 可以自定义样式
      printWindow.document.write('</head><body>');
      printWindow.document.write(printContents);  // 写入要打印的内容
      printWindow.document.write('</body></html>');
      printWindow.document.close();  // 关闭文档流
      printWindow.print();  // 调用打印
      document.body.innerHTML = originalContents;  // 恢复原页面内容
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
.ptag {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

解释：

获取要打印的区域：通过 this.$refs.printArea.innerHTML 获取需要打印的区域内容。这里 ref=“printArea” 用于标记需要打印的 DOM 区域。
打开打印对话框：通过 window.open 创建一个新的打印窗口。我们将要打印的内容写入到该窗口的 body 中。
自定义样式：通过

可能遇到问题

进行打印操作后关闭打印页面因此导致原本页面不能进行操作
原因：出现点击无效的情况通常是由于打印对话框打开时，浏览器的主页面被占用或阻塞，导致用户无法与页面交互。这种问题常常发生在打印后没有正确恢复页面状态，或者打印窗口的打开和关闭处理不当。

常见解决方案

1，确保关闭打印窗口后恢复主页面：如果打印时打开了一个新窗口或覆盖了页面内容，需要在打印结束后确保主页面的 DOM 被恢复。
2，避免页面被遮挡：如果你在打印时将内容隐藏到一个 fixed 的位置，或者在打印时操作了页面的 DOM，可能会影响后续的页面交互。确保打印操作仅影响打印内容，页面其他部分保持可交互。

解决方法

1，在打印后恢复页面内容：你需要在打印窗口关闭后，确保主页面的内容恢复到正常状态，通常可以通过 window.onafterprint 事件来触发。
2，使用 window.print() 的回调：使用 window.onafterprint 来确保打印操作完成后页面恢复正常，避免锁定页面。

解决代码

 // 等待打印完成后恢复页面内容
      printWindow.print();
      printWindow.onafterprint = () => {
        // 打印完成后恢复原页面内容
        document.body.innerHTML = originalContents;
      };

关键修改：

printWindow.onafterprint 回调：
监听打印完成事件，当打印完成时触发回调。
在回调中使用 document.body.innerHTML = originalContents 恢复页面内容，这样在打印完成后，页面可以正常交互。
恢复页面状态：
通过 onafterprint 来确保打印操作完成后，页面会恢复原来的 HTML 状态。
其他可能的问题：
浏览器的行为差异：不同浏览器对打印操作的处理可能略有不同。如果你遇到浏览器不响应的情况，可以考虑在不同浏览器中进行测试，尤其是 onafterprint 在某些浏览器中的支持情况。
打印对话框阻塞：某些浏览器在打开打印对话框时，可能会暂时阻塞用户与页面的交互。一般来说，在打印完成后页面会恢复正常，但如果 window.print() 操作阻塞主线程，可能会影响交互。