当前位置：首页 > VUE

vue实现打印图片

2026-03-30 00:34:32VUE

实现图片打印的基本方法

在Vue中实现图片打印功能，可以通过浏览器原生的window.print()方法结合CSS媒体查询完成。需要创建一个隐藏的打印容器，将图片放入其中，触发打印时显示该容器。

<template>
  <div>
    <img :src="imageUrl" alt="待打印图片">
    <button @click="printImage">打印图片</button>
    <div class="print-container" ref="printContainer" v-show="false">
      <img :src="imageUrl" alt="打印内容">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'your-image-path.jpg'
    }
  },
  methods: {
    printImage() {
      const printContainer = this.$refs.printContainer
      printContainer.style.display = 'block'
      window.print()
      printContainer.style.display = 'none'
    }
  }
}
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  .print-container, .print-container * {
    visibility: visible;
  }
  .print-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
</style>

使用html2canvas处理复杂打印需求

对于需要将DOM元素转为图片再打印的情况，可以使用html2canvas库。这种方法适合打印包含样式和布局的复杂内容。

安装依赖：

npm install html2canvas

实现代码：

<template>
  <div>
    <div class="content-to-print" ref="contentToPrint">
      <!-- 需要打印的内容 -->
      <img :src="imageUrl" alt="待打印内容">
    </div>
    <button @click="printWithCanvas">打印内容</button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  methods: {
    async printWithCanvas() {
      const element = this.$refs.contentToPrint
      const canvas = await html2canvas(element)
      const dataUrl = canvas.toDataURL('image/png')

      const windowContent = `
        <!DOCTYPE html>
        <html>
          <head>
            <title>打印预览</title>
          </head>
          <body>
            <img src="${dataUrl}" style="max-width:100%">
          </body>
        </html>
      `

      const printWindow = window.open('', '', 'width=800,height=600')
      printWindow.document.open()
      printWindow.document.write(windowContent)
      printWindow.document.close()
      printWindow.focus()
      printWindow.print()
      printWindow.close()
    }
  }
}
</script>

使用第三方打印插件

对于更专业的打印需求，可以考虑使用vue-print-nb等专门为Vue开发的打印插件。

安装插件：

npm install vue-print-nb

使用示例：

<template>
  <div>
    <div id="printArea">
      <img :src="imageUrl" alt="待打印图片">
    </div>
    <button v-print="printConfig">打印</button>
  </div>
</template>

<script>
import print from 'vue-print-nb'

export default {
  directives: {
    print
  },
  data() {
    return {
      imageUrl: 'your-image-path.jpg',
      printConfig: {
        id: 'printArea',
        popTitle: '打印标题',
        extraCss: 'https://example.com/print-styles.css'
      }
    }
  }
}
</script>

处理多页打印和样式调整

打印样式需要特别注意，可以通过CSS媒体查询优化打印效果：

vue实现打印图片

@media print {
  @page {
    size: A4 landscape; /* 横向打印 */
    margin: 0; /* 去除页边距 */
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid; /* 防止图片被分割到两页 */
  }

  .no-print {
    display: none !important;
  }
}