Vue頁面轉PDF展示

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

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

这段代码使用vue框架将页面转换成PDF，并使用iframe标签将PDF文件嵌入到页面中。代码中使用了html2canvas和jsPDF库来实现转换和嵌入功能。通过点击"下载PDF"按钮，页面会将当前内容转换成PDF文件并提供下载链接。

以下是使用 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>

記錄備忘.