Vue で jsPDF と html2canvas を使用して PDF を生成するための完全ガイド

近年、PDF 形式のドキュメントは、多くの人が情報を書いたり共有したりするための最初の選択肢となっています。 Web 開発では、人気の JavaScript フレームワークである Vue も、PDF ドキュメントの生成に役立つ便利なツールを多数提供します。この記事では、Vue、jsPDF、html2canvas を使用して PDF ドキュメントを生成する方法に関する完全なガイドを紹介します。

1. jsPDF と html2canvas の概要

1. jsPDF

jsPDF は、クライアントで使用できる PDF ファイルを生成する JavaScript ライブラリです。テキスト、画像、表などを含む PDF ドキュメントを生成でき、PDF ドキュメントに透かしや署名を追加するなどの機能をサポートします。

2. html2canvas

html2canvas は、HTML ページを Canvas に変換する JavaScript ライブラリです。 jsPDF を使用して PDF ドキュメントを生成する場合、html2canvas を使用してページのスクリーンショットを生成し、スクリーンショットを PDF ドキュメント内の画像に変換できます。

2. インストールと使用

1. jsPDF と html2canvas のインストール

jsPDF と html2canvas をインストールするには、npm を通じてこれら 2 つのライブラリの js をダウンロードできます。または公式ウェブサイトのドキュメントから。 Vue プロジェクトでは、npm を使用してインストールできます。

npm install jspdf html2canvas

2. Vue プロジェクトで使用

#Vue プロジェクトでは、PDF ドキュメントを生成する必要があるコンポーネントに jsPDF と html2canvas を導入する必要があります。

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

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

この Vue コンポーネントでは、まず使用する必要があるライブラリを導入する必要があります。 data メソッドで、生成された PDF ドキュメントを保存する pdfDoc オブジェクトを定義します。 Methods メソッドでは、実際に PDF ドキュメントを生成するためのgeneratePDF メソッドを定義します。

実際に PDF ドキュメントを生成する

generatePDF メソッドを呼び出すときは、まず html2canvas を使用してページのスクリーンショットを生成し、そのスクリーンショットを PDF ドキュメント内の画像に変換する必要があります。すべての画像は最終的に 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')
}

この方法では、まず PDF に変換する必要がある DOM 要素を取得します。次に、html2canvas を使用して DOM 要素を Canvas に変換し、Canvas を DataURL 形式の画像データに変換します。次に、jsPDF オブジェクトを初期化し、PDF ドキュメントのページ プロパティを定義します。最後に、ページのスクリーンショットを PDF ドキュメントに追加し、画像の高さがページの高さを超えるかどうかに応じてページを分割します。

3. 効果のデモンストレーション

Vue プロジェクトでは、簡単な例を使用して、jsPDF と html2canvas を使用して PDF ドキュメントを生成する方法をデモンストレーションできます。ここでは例として、テキストと画像を表示し、PDFファイルに変換します。 Vue コンポーネントのコードは次のとおりです。

<template>
  <div>
    <div id="pdfContent">
      <p>这是一段文本</p>
      <img  src="/static/imghwm/default1.png"  data-src="../assets/example.png"  class="lazy" alt="Vue で jsPDF と html2canvas を使用して PDF を生成するための完全ガイド" >
    </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>

この例をブラウザで開き、[PDF の生成] ボタンをクリックして、生成された PDF ファイルをブラウザにダウンロードします。

4. まとめ

Vue、jsPDF、html2canvasを利用してPDFドキュメントを生成すると、Web上でPDFファイルを生成する機能を簡単に実現できます。この記事では、jsPDFとhtml2canvasのインストール方法と使い方、Vueを使ってPDFファイルを生成する例を紹介しました。この記事での紹介を通じて、読者はこれらのツールを使用して PDF ドキュメントを生成することを簡単に開始できると思います。

以上がVue で jsPDF と html2canvas を使用して PDF を生成するための完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。