Vue Page to PDF Display

May 24, 2023#vue #html2canvas #jspdf #canvas358

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This code example demonstrates how to convert a webpage into a PDF using the Vue framework. It uses the html2canvas library to capture the webpage as an image and the jsPDF library to create a PDF. The resulting PDF is then embedded into the webpage using an iframe tag. The code also includes a method for downloading the PDF.

Here is a detailed code example of using the Vue framework to convert a page to PDF and embed the PDF file into the page using the iframe tag:

<template>
  <div>
    <button @click="downloadPDF">Download 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>

Memo.