当前位置：首页 > VUE

vue实现html转pdf

2026-02-20 18:46:47VUE

vue实现html转pdf的方法

使用html2canvas和jspdf库

安装依赖库：

npm install html2canvas jspdf --save

在Vue组件中引入并使用：

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

export default {
  methods: {
    async generatePDF() {
      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('download.pdf')
    }
  }
}

使用vue-html2pdf插件

安装插件：

npm install vue-html2pdf --save

在Vue中使用：

import VueHtml2pdf from 'vue-html2pdf'

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

模板部分：

<vue-html2pdf ref="html2Pdf" :html-to-pdf-options="pdfOptions">
  <div slot="pdf-content">
    <!-- 要转换为PDF的HTML内容 -->
  </div>
</vue-html2pdf>
<button @click="generatePDF">生成PDF</button>

使用pdfmake客户端库

安装pdfmake：

npm install pdfmake --save

使用示例：

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

export default {
  methods: {
    generatePDF() {
      const docDefinition = {
        content: [
          { text: 'PDF内容', style: 'header' },
          '通过HTML转换的PDF文档'
        ],
        styles: {
          header: {
            fontSize: 18,
            bold: true
          }
        }
      }
      pdfMake.createPdf(docDefinition).download('document.pdf')
    }
  }
}

使用浏览器打印功能

通过CSS媒体查询实现打印样式：

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

JavaScript调用打印：

vue实现html转pdf