Vollständige Anleitung zum Generieren von PDFs mit jsPDF und html2canvas in Vue

In den letzten Jahren sind Dokumente im PDF-Format für viele Menschen zur ersten Wahl zum Schreiben und Teilen von Informationen geworden. Auch in der Webentwicklung stellt Vue als beliebtes JavaScript-Framework viele praktische Tools zur Verfügung, die uns bei der Generierung von PDF-Dokumenten unterstützen. In diesem Artikel stellen wir eine vollständige Anleitung zum Generieren von PDF-Dokumenten mit Vue, jsPDF und html2canvas vor.

1. Einführung in jsPDF und html2canvas

1. jsPDF

jsPDF ist eine JavaScript-Bibliothek, die PDF-Dateien generiert, die auf der Clientseite verwendet werden können. Es kann PDF-Dokumente einschließlich Text, Bildern, Tabellen usw. generieren und unterstützt Funktionen wie das Hinzufügen von Wasserzeichen und Signaturen zu PDF-Dokumenten.

2. html2canvas

html2canvas ist eine JavaScript-Bibliothek, die HTML-Seiten in Canvas konvertiert. Wenn Sie jsPDF zum Generieren von PDF-Dokumenten verwenden, können Sie mit html2canvas Seiten-Screenshots erstellen und die Screenshots in Bilder im PDF-Dokument konvertieren.

2. Installation und Verwendung

1. Installieren Sie jsPDF und html2canvas

Um jsPDF und html2canvas zu installieren, können Sie die js-Dateien dieser beiden Bibliotheken über npm oder von der offiziellen Website herunterladen. In einem Vue-Projekt können Sie es mit npm installieren.

npm install jspdf html2canvas

2. Wird in Vue-Projekten verwendet

In Vue-Projekten müssen wir jsPDF und html2canvas in die Komponenten einführen, die zum Generieren von PDF-Dokumenten erforderlich sind.

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

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

In dieser Vue-Komponente müssen wir zunächst die Bibliotheken vorstellen, die wir verwenden müssen. Definieren Sie in der Datenmethode ein pdfDoc-Objekt zum Speichern des generierten PDF-Dokuments. Definieren Sie in der Methode „Methoden“ die Methode „generatePDF“, um tatsächlich PDF-Dokumente zu generieren.

3. Generieren Sie tatsächlich PDF-Dokumente

Beim Aufruf der Methode „generatePDF“ müssen wir zunächst html2canvas verwenden, um Seiten-Screenshots zu generieren und die Screenshots in Bilder im PDF-Dokument umzuwandeln. Alle Bilder werden abschließend dem PDF-Dokument hinzugefügt.

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')
}

Bei dieser Methode erhalten Sie zunächst die DOM-Elemente, die in PDF konvertiert werden müssen. Verwenden Sie dann html2canvas, um die DOM-Elemente in Canvas zu konvertieren, und konvertieren Sie dann den Canvas in Bilddaten im DataURL-Format. Als nächstes initialisieren Sie ein jsPDF-Objekt und definieren die Seiteneigenschaften des PDF-Dokuments. Fügen Sie abschließend den Seiten-Screenshot zum PDF-Dokument hinzu und teilen Sie die Seiten danach auf, ob die Bildhöhe die Seitenhöhe überschreitet.

3. Effektdemonstration

Im Vue-Projekt können wir anhand eines einfachen Beispiels demonstrieren, wie man mit jsPDF und html2canvas PDF-Dokumente generiert. In diesem Beispiel werden wir einen Text und ein Bild anzeigen und in PDF-Dateien konvertieren. Der Code in der Vue-Komponente lautet wie folgt:

<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>

Öffnen Sie dieses Beispiel im Browser und klicken Sie auf die Schaltfläche „PDF generieren“, um die generierte PDF-Datei im Browser herunterzuladen.

4. Zusammenfassung

Mit Vue, jsPDF und html2canvas können PDF-Dokumente problemlos generiert werden. In diesem Artikel haben wir die Installation und Verwendung von jsPDF und html2canvas vorgestellt und ein Beispiel für die Verwendung von Vue zum Generieren von PDF-Dateien gegeben. Ich glaube, dass Leser durch die Einführung in diesem Artikel leicht mit der Verwendung dieser Tools zum Generieren von PDF-Dokumenten beginnen können.

Das obige ist der detaillierte Inhalt vonVollständige Anleitung zum Generieren von PDFs mit jsPDF und html2canvas in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!