vue ページを PDF で表示

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

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

这段代码使用vue框架将页面转换成PDF，并使用iframe标签将PDF文件嵌入到页面中。代码中包括使用html2canvas库将页面转换成canvas，然后将canvas转换成图片数据，再使用jspdf库将图片数据添加到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>

メモを記録します。