当前位置：首页 > VUE

vue实现导出PDF

2026-01-18 12:25:59VUE

使用html2canvas和jsPDF实现PDF导出

在Vue项目中，可以通过html2canvas和jsPDF库结合实现将HTML内容导出为PDF。这两个库分别负责将HTML转换为canvas图像，再将图像转为PDF文件。

安装依赖库：

npm install html2canvas jspdf

创建导出方法：

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

export default {
  methods: {
    exportToPDF() {
      const element = document.getElementById('pdf-content')
      html2canvas(element).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        const pdf = new jsPDF('p', 'mm', 'a4')
        const imgWidth = 210 // A4纸张宽度
        const imgHeight = canvas.height * imgWidth / canvas.width

        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
        pdf.save('export.pdf')
      })
    }
  }
}

使用vue-html2pdf插件

vue-html2pdf是专为Vue设计的PDF导出插件，简化了导出流程。

安装插件：

npm install vue-html2pdf

组件中使用：

import VueHtml2pdf from 'vue-html2pdf'

export default {
  components: {
    VueHtml2pdf
  },
  methods: {
    generateReport() {
      this.$refs.html2Pdf.generatePdf()
    }
  }
}

模板部分：

<vue-html2pdf ref="html2Pdf" :filename="'report.pdf'">
  <div slot="pdf-content">
    <!-- 需要导出的内容 -->
  </div>
</vue-html2pdf>
<button @click="generateReport">导出PDF</button>

使用PDFMake生成结构化PDF

当需要生成更结构化的PDF文档时，可以使用pdfmake库。

安装库：

npm install pdfmake

生成PDF示例：

import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
pdfMake.vfs = pdfFonts.pdfMake.vfs

export default {
  methods: {
    createPDF() {
      const docDefinition = {
        content: [
          { text: '标题', style: 'header' },
          '常规文本内容',
          { text: '表格示例', style: 'subheader' },
          {
            table: {
              body: [
                ['列1', '列2', '列3'],
                ['值1', '值2', '值3']
              ]
            }
          }
        ],
        styles: {
          header: { fontSize: 18, bold: true },
          subheader: { fontSize: 15, bold: true, margin: [0, 15, 0, 5] }
        }
      }
      pdfMake.createPdf(docDefinition).download('document.pdf')
    }
  }
}

服务器端生成PDF

对于复杂PDF或需要后端处理的场景，可以通过API调用服务器生成PDF。

前端请求示例：

axios.post('/api/generate-pdf', {
  html: document.getElementById('pdf-content').innerHTML
}, {
  responseType: 'blob'
}).then(response => {
  const url = window.URL.createObjectURL(new Blob([response.data]))
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', 'export.pdf')
  document.body.appendChild(link)
  link.click()
})