vue 实现导出pdf

使用 html2canvas 和 jsPDF 实现导出 PDF

在 Vue 项目中安装 html2canvas 和 jsPDF 依赖：

npm install html2canvas jspdf

创建一个方法将指定 DOM 元素转换为 PDF：

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
        const pageHeight = 295
        const imgHeight = canvas.height * imgWidth / canvas.width
        let heightLeft = imgHeight
        let position = 0

        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
        heightLeft -= pageHeight

        while (heightLeft >= 0) {
          position = heightLeft - imgHeight
          pdf.addPage()
          pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
          heightLeft -= pageHeight
        }

        pdf.save('export.pdf')
      })
    }
  }
}

使用 vue-html2pdf 插件

安装 vue-html2pdf 插件：

npm install vue-html2pdf

在组件中使用：

import VueHtml2pdf from 'vue-html2pdf'

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

模板部分：

<template>
  <div>
    <button @click="generateReport">导出PDF</button>
    <vue-html2pdf
      ref="html2Pdf"
      :filename="'report.pdf'"
      :paginate-elements-by-height="1400"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="portrait"
    >
      <section slot="pdf-content">
        <!-- 这里放要导出的内容 -->
        <div id="pdf-content">...</div>
      </section>
    </vue-html2pdf>
  </div>
</template>

使用 PDFMake 库实现

安装 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: {
    exportPDF() {
      const docDefinition = {
        content: [
          { text: 'PDF标题', style: 'header' },
          '这里是PDF内容...',
          { text: '表格示例', style: 'subheader' },
          {
            table: {
              body: [
                ['列1', '列2', '列3'],
                ['值1', '值2', '值3']
              ]
            }
          }
        ],
        styles: {
          header: { fontSize: 18, bold: true },
          subheader: { fontSize: 15, bold: true }
        }
      }
      pdfMake.createPdf(docDefinition).download('document.pdf')
    }
  }
}

使用浏览器打印功能

通过 CSS 媒体查询优化打印样式：

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

调用浏览器打印 API：

export default {
  methods: {
    printPDF() {
      window.print()
    }
  }
}

注意事项

确保导出的内容在 DOM 中完全渲染后再执行导出操作，可以在 nextTick 中调用导出方法：

this.$nextTick(() => {
  this.exportToPDF()
})

对于复杂布局，可能需要调整 html2canvas 的配置参数：

html2canvas(element, {
  scale: 2,  // 提高分辨率
  logging: false,
  useCORS: true,
  allowTaint: true
})

中文显示问题可以通过引入中文字体解决，在 jsPDF 中：

const pdf = new jsPDF({
  orientation: 'p',
  unit: 'mm',
  format: 'a4',
  hotfixes: ['px_scaling']
})
pdf.addFont('simhei.ttf', 'simhei', 'normal')
pdf.setFont('simhei')