当前位置：首页 > VUE

vue实现打印图片

2026-03-09 12:49:36VUE

实现打印图片的方法

在Vue中实现打印图片的功能，可以通过以下步骤完成。这里假设已经有一个Vue项目，并且需要打印的图片已经存在于页面中或通过URL获取。

使用window.print()方法

创建一个专门用于打印的组件或方法，将图片放入一个隐藏的div中，当触发打印时显示该div并调用window.print()。

<template>
  <div>
    <button @click="printImage">打印图片</button>
    <div id="printArea" style="display: none;">
      <img :src="imageUrl" style="width: 100%;" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    printImage() {
      const printArea = document.getElementById('printArea');
      printArea.style.display = 'block';
      window.print();
      printArea.style.display = 'none';
    }
  }
}
</script>

使用CSS控制打印样式

通过CSS的@media print规则，可以控制打印时的样式，确保只有需要的部分被打印。

<template>
  <div>
    <button @click="printImage">打印图片</button>
    <div class="print-only">
      <img :src="imageUrl" />
    </div>
  </div>
</template>

<style>
.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
  body * {
    visibility: hidden;
  }
  .print-only, .print-only * {
    visibility: visible;
  }
}
</style>

使用第三方库vue-print-nb

如果需要更复杂的打印功能，可以使用第三方库如vue-print-nb。

安装库：

npm install vue-print-nb --save

在Vue项目中使用：

import Print from 'vue-print-nb'

Vue.use(Print);

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

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      printObj: {
        id: 'printArea',
        popTitle: '打印图片'
      }
    }
  }
}
</script>

动态加载图片并打印

如果需要从后端动态获取图片并打印，可以使用axios或其他HTTP库获取图片URL。

vue实现打印图片

<template>
  <div>
    <button @click="fetchAndPrintImage">获取并打印图片</button>
    <div id="printArea" style="display: none;">
      <img :src="imageUrl" v-if="imageUrl" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: null
    }
  },
  methods: {
    fetchAndPrintImage() {
      axios.get('/api/getImageUrl')
        .then(response => {
          this.imageUrl = response.data.url;
          this.$nextTick(() => {
            const printArea = document.getElementById('printArea');
            printArea.style.display = 'block';
            window.print();
            printArea.style.display = 'none';
          });
        })
        .catch(error => {
          console.error('获取图片失败:', error);
        });
    }
  }
}
</script>