Panduan lengkap untuk menjana PDF menggunakan jsPDF dan html2canvas dalam Vue

Dalam beberapa tahun kebelakangan ini, dokumen format PDF telah menjadi pilihan pertama bagi ramai orang untuk menulis dan berkongsi maklumat. Dalam pembangunan web, Vue, sebagai rangka kerja JavaScript yang popular, juga menyediakan banyak alat mudah untuk membantu kami menjana dokumen PDF. Dalam artikel ini, kami akan membentangkan panduan lengkap tentang cara menjana dokumen PDF menggunakan Vue, jsPDF dan html2canvas.

1. Pengenalan kepada jsPDF dan html2canvas

1. jsPDF

jsPDF ialah perpustakaan JavaScript yang menjana fail PDF, yang boleh digunakan pada klien. Ia boleh menjana dokumen PDF termasuk teks, gambar, jadual, dsb., dan menyokong fungsi seperti menambah tera air dan tandatangan pada dokumen PDF.

2. html2canvas

html2canvas ialah perpustakaan JavaScript yang menukar halaman HTML kepada Canvas. Apabila menggunakan jsPDF untuk menjana dokumen PDF, anda boleh menggunakan html2canvas untuk menjana tangkapan skrin halaman dan menukar tangkapan skrin kepada imej dalam dokumen PDF.

2. Pemasangan dan penggunaan

1. Pasang jsPDF dan html2canvas

Untuk memasang jsPDF dan html2canvas, anda boleh memuat turun js kedua-dua perpustakaan ini melalui npm atau daripada dokumen laman web rasmi. Dalam projek Vue, anda boleh menggunakan npm untuk memasangnya.

npm install jspdf html2canvas

2. Gunakan

dalam projek Vue Dalam projek Vue, kami perlu memperkenalkan jsPDF dan html2canvas ke dalam komponen yang perlu menjana dokumen PDF.

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

export default {
  data() {
    return {
      pdfDoc: null // PDF文档对象
    }
  },
  methods: {
    async generatePDF() {
      // 生成PDF的方法
    }
  }
}
</script>

Dalam komponen Vue ini, kita perlu terlebih dahulu memperkenalkan perpustakaan yang perlu kita gunakan. Dalam kaedah data, tentukan objek pdfDoc untuk menyimpan dokumen PDF yang dijana. Dalam kaedah kaedah, tentukan kaedah generatePDF untuk benar-benar menjana dokumen PDF.

3. Sebenarnya jana dokumen PDF

Apabila memanggil kaedah generatePDF, kita perlu menggunakan html2canvas dahulu untuk menjana tangkapan skrin halaman dan menukar tangkapan skrin kepada imej dalam PDF dokumen. Semua gambar akhirnya ditambahkan pada dokumen PDF.

async generatePDF() {
  // 获取需要转化为PDF的DOM元素
  const dom = document.querySelector('#pdfContent')

  // 使用html2canvas将DOM元素转化为Canvas
  const canvas = await html2canvas(dom)

  // 将Canvas转换为DataURL
  const imgData = canvas.toDataURL('image/png')

  // 初始化PDF文档对象
  this.pdfDoc = new jsPDF()

  // 定义PDF文档的页面属性
  const pdfWidth = this.pdfDoc.internal.pageSize.getWidth()
  const pdfHeight = this.pdfDoc.internal.pageSize.getHeight()
  const imgWidth = canvas.width
  const imgHeight = canvas.height

  let position = 0

  // 将页面截图添加到PDF文档中
  this.pdfDoc.addImage(imgData, 'PNG', 0, position, imgWidth * 0.7, imgHeight * 0.7)

  // 如果图片的高度超出了页面高度，则需要分页
  while (position < imgHeight) {
    position -= pdfHeight
    if (position < imgHeight) {
      this.pdfDoc.addPage() // 添加新的页面
      this.pdfDoc.addImage(imgData, 'PNG', 0, position + pdfHeight, imgWidth * 0.7, imgHeight * 0.7)
    }
  }

  // 保存PDF文档
  this.pdfDoc.save('example.pdf')
}

Dalam kaedah ini, mula-mula dapatkan elemen DOM yang perlu ditukar kepada PDF. Kemudian gunakan html2canvas untuk menukar elemen DOM kepada Canvas dan kemudian menukar Canvas kepada data imej dalam format DataURL. Seterusnya, mulakan objek jsPDF dan tentukan sifat halaman dokumen PDF. Akhir sekali, tambahkan tangkapan skrin halaman pada dokumen PDF, dan bahagikan halaman mengikut sama ada ketinggian gambar melebihi ketinggian halaman.

3. Demonstrasi Kesan

Dalam projek Vue, kita boleh menggunakan contoh mudah untuk menunjukkan cara menggunakan jsPDF dan html2canvas untuk menjana dokumen PDF. Dalam contoh ini, kami akan memaparkan teks dan imej dan menukarnya kepada fail PDF. Kod dalam komponen Vue adalah seperti berikut:

<template>
  <div>
    <div id="pdfContent">
      <p>这是一段文本</p>
      <img src="../assets/example.png">
    </div>
    <button @click="generatePDF">生成PDF</button>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfDoc: null
    }
  },
  methods: {
    async generatePDF() {
      const dom = document.querySelector('#pdfContent')
      const canvas = await html2canvas(dom)
      const imgData = canvas.toDataURL('image/png')
      this.pdfDoc = new jsPDF()
      const pdfWidth = this.pdfDoc.internal.pageSize.getWidth()
      const pdfHeight = this.pdfDoc.internal.pageSize.getHeight()
      const imgWidth = canvas.width
      const imgHeight = canvas.height
      let position = 0
      this.pdfDoc.addImage(imgData, 'PNG', 0, position, imgWidth * 0.7, imgHeight * 0.7)
      while (position < imgHeight) {
        position -= pdfHeight
        if (position < imgHeight) {
          this.pdfDoc.addPage()
          this.pdfDoc.addImage(imgData, 'PNG', 0, position + pdfHeight, imgWidth * 0.7, imgHeight * 0.7)
        }
      }
      this.pdfDoc.save('example.pdf')
    }
  }
}
</script>

Buka contoh ini dalam penyemak imbas dan klik butang "Jana PDF" untuk memuat turun fail PDF yang dijana dalam penyemak imbas.

4. Ringkasan

Menggunakan Vue, jsPDF dan html2canvas untuk menjana dokumen PDF boleh merealisasikan fungsi menjana fail PDF di Web dengan mudah. Dalam artikel ini, kami memperkenalkan cara memasang dan menggunakan jsPDF dan html2canvas, serta contoh cara menggunakan Vue untuk menjana fail PDF. Saya percaya bahawa melalui pengenalan dalam artikel ini, pembaca boleh mula menggunakan alat ini untuk menjana dokumen PDF dengan mudah.

Atas ialah kandungan terperinci Panduan lengkap untuk menjana PDF menggunakan jsPDF dan html2canvas dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!