当前位置：首页 > VUE

vue实现pdf打印

2026-02-19 19:45:45VUE

使用vue实现PDF打印

在Vue项目中实现PDF打印功能可以通过多种方式完成，以下是几种常见的方法：

使用html2canvas和jspdf库

安装必要的依赖库：

npm install html2canvas jspdf

在Vue组件中使用：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  methods: {
    async printPDF() {
      const element = document.getElementById('pdf-content')
      const canvas = await html2canvas(element)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 0, 0)
      pdf.save('document.pdf')
    }
  }
}

使用vue-html-to-paper插件

安装插件：

npm install vue-html-to-paper

在main.js中配置：

import VueHtmlToPaper from 'vue-html-to-paper'
Vue.use(VueHtmlToPaper)

在组件中使用：

vue实现pdf打印

this.$htmlToPaper('printMe', {
  name: '_blank',
  specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
  styles: ['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css']
})

使用pdf-lib库创建动态PDF

安装pdf-lib：

npm install pdf-lib

创建自定义PDF：

import { PDFDocument, rgb } from 'pdf-lib'

async function createPDF() {
  const pdfDoc = await PDFDocument.create()
  const page = pdfDoc.addPage([550, 750])
  const { height } = page.getSize()

  page.drawText('Hello World', {
    x: 50,
    y: height - 50,
    size: 50,
    color: rgb(0, 0, 0),
  })

  const pdfBytes = await pdfDoc.save()
  download(pdfBytes, 'test.pdf', 'application/pdf')
}

使用浏览器原生打印功能

对于简单的打印需求，可以直接使用浏览器打印API：

vue实现pdf打印

window.print()

或者更精细控制：

function printDiv(divId) {
  const printContents = document.getElementById(divId).innerHTML
  const originalContents = document.body.innerHTML

  document.body.innerHTML = printContents
  window.print()
  document.body.innerHTML = originalContents
}

注意事项

确保要打印的内容在DOM中完全渲染后再调用打印方法

对于复杂布局，可能需要调整CSS样式，添加@media print规则：

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

考虑添加加载状态，因为生成PDF可能需要时间

对于大量数据，可能需要分页处理以避免性能问题