当前位置：首页 > VUE

vue实现截图打印

2026-02-18 01:59:34VUE

Vue 实现截图打印功能

在 Vue 中实现截图打印功能通常需要结合第三方库或原生 API。以下是两种常见的方法：

使用 html2canvas 截图并打印

安装 html2canvas 库：

npm install html2canvas

在 Vue 组件中使用：

import html2canvas from 'html2canvas';

export default {
  methods: {
    async captureAndPrint() {
      const element = document.getElementById('capture-area');
      const canvas = await html2canvas(element);
      const image = canvas.toDataURL('image/png');

      const printWindow = window.open('', '_blank');
      printWindow.document.write(`
        <img src="${image}" onload="window.print()" style="width:100%;" />
      `);
      printWindow.document.close();
    }
  }
}

使用原生 window.print() 方法

对于不需要截图直接打印的情况：

export default {
  methods: {
    printContent() {
      const printContent = document.getElementById('print-area');
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent.innerHTML;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}

注意事项

确保要打印的元素在 DOM 中完全渲染后再执行截图或打印操作，可以在 mounted 钩子或使用 $nextTick。

对于复杂样式，html2canvas 可能需要额外配置：

html2canvas(element, {
  scale: 2,  // 提高分辨率
  logging: false,
  useCORS: true  // 允许跨域图片
});

打印样式可以通过 CSS 媒体查询优化：

vue实现截图打印

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}