vue 页面转 PDF 展示

2023年5月24日#vue #html2canvas #jspdf #canvas288

AI 生成的摘要

这段代码使用Vue框架将页面转换为PDF，并使用iframe标签将PDF文件嵌入页面中。代码使用html2canvas库将页面转换为canvas，然后使用jspdf库将canvas转换为PDF。最后，将PDF的数据URL存储在pdfUrl变量中。

以下是使用 vue 框架，将页面转换成 PDF 并使用 iframe 标签将 PDF 文件嵌入到页面中的详细代码示例：

<template>
  <div>
    <button @click="downloadPDF">下载PDF</button>
    <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'

export default {
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    async downloadPDF() {
      const canvas = await html2canvas(document.body)
      const imgData = canvas.toDataURL('image/png')
      const pdf = new jsPDF()
      pdf.addImage(imgData, 'PNG', 0, 0)
      const pdfUrl = pdf.output('datauristring')
      this.pdfUrl = pdfUrl
    }
  }
}
</script>