当前位置：首页 > VUE

VUE实现PDF打印页面

2026-01-23 09:48:38VUE

使用vue-pdf-embed组件实现PDF打印

安装vue-pdf-embed依赖包

npm install vue-pdf-embed

在Vue组件中引入并使用

<template>
  <div>
    <vue-pdf-embed :source="pdfUrl" ref="pdfRef" />
    <button @click="printPDF">打印PDF</button>
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'

export default {
  components: {
    VuePdfEmbed
  },
  data() {
    return {
      pdfUrl: '/path/to/your/file.pdf'
    }
  },
  methods: {
    printPDF() {
      window.print()
    }
  }
}
</script>

使用PDF.js库实现自定义打印

安装pdfjs-dist库

npm install pdfjs-dist

实现PDF渲染和打印功能

<template>
  <div>
    <div ref="pdfContainer"></div>
    <button @click="printPDF">打印</button>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
import 'pdfjs-dist/web/pdf_viewer.css'

export default {
  data() {
    return {
      pdfUrl: '/path/to/your/file.pdf'
    }
  },
  methods: {
    async loadPDF() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise

      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i)
        const viewport = page.getViewport({ scale: 1.0 })

        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise

        this.$refs.pdfContainer.appendChild(canvas)
      }
    },
    printPDF() {
      const printWindow = window.open('', '_blank')
      printWindow.document.write('<html><head><title>打印PDF</title></head><body>')
      printWindow.document.write(this.$refs.pdfContainer.innerHTML)
      printWindow.document.write('</body></html>')
      printWindow.document.close()
      printWindow.focus()
      printWindow.print()
    }
  },
  mounted() {
    this.loadPDF()
  }
}
</script>

使用iframe嵌入PDF实现打印

创建iframe组件打印PDF

<template>
  <div>
    <iframe 
      ref="pdfFrame" 
      :src="pdfUrl" 
      style="width: 100%; height: 800px; border: none;"
    ></iframe>
    <button @click="printPDF">打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: '/path/to/your/file.pdf'
    }
  },
  methods: {
    printPDF() {
      this.$refs.pdfFrame.contentWindow.print()
    }
  }
}
</script>

使用CSS优化打印样式

添加打印样式表

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

处理PDF文件下载与打印

从后端API获取PDF并打印

VUE实现PDF打印页面

<template>
  <div>
    <button @click="fetchAndPrintPDF">下载并打印PDF</button>
  </div>
</template>

<script>
export default {
  methods: {
    async fetchAndPrintPDF() {
      const response = await fetch('/api/get-pdf')
      const blob = await response.blob()
      const url = URL.createObjectURL(blob)

      const iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = url
      document.body.appendChild(iframe)

      iframe.onload = () => {
        setTimeout(() => {
          iframe.contentWindow.print()
          URL.revokeObjectURL(url)
          document.body.removeChild(iframe)
        }, 500)
      }
    }
  }
}
</script>