Guide complet pour générer des PDF à l'aide de jsPDF et html2canvas dans Vue

Ces dernières années, les documents au format PDF sont devenus le premier choix pour de nombreuses personnes pour rédiger et partager des informations. Dans le développement Web, Vue, en tant que framework JavaScript populaire, fournit également de nombreux outils pratiques pour nous aider à générer des documents PDF. Dans cet article, nous présenterons un guide complet sur la façon de générer des documents PDF à l'aide de Vue, jsPDF et html2canvas.

1. Introduction à jsPDF et html2canvas

1. jsPDF

jsPDF est une bibliothèque JavaScript qui génère des fichiers PDF. Il peut être utilisé côté client. Il peut générer des documents PDF comprenant du texte, des images, des tableaux, etc., et prend en charge des fonctions telles que l'ajout de filigranes et de signatures aux documents PDF.

2. html2canvas

html2canvas est une bibliothèque JavaScript qui convertit les pages HTML en Canvas. Lorsque vous utilisez jsPDF pour générer des documents PDF, vous pouvez utiliser html2canvas pour générer des captures d'écran de page et convertir les captures d'écran en images dans le document PDF.

2. Installation et utilisation

1. Installer jsPDF et html2canvas

L'installation de jsPDF et html2canvas peut se faire via npm ou depuis Téléchargez les fichiers js de ces deux bibliothèques depuis le site officiel. Dans un projet Vue, vous pouvez utiliser npm pour l'installer.

npm install jspdf html2canvas

2. En utilisant

dans le projet Vue, nous devons introduire jsPDF et html2canvas dans les composants qui doivent générer des documents PDF.

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

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

Dans ce composant Vue, nous devons d'abord présenter les bibliothèques que nous devons utiliser. Dans la méthode data, définissez un objet pdfDoc pour stocker le document PDF généré. Dans la méthode méthodes, définissez la méthode generatePDF pour générer réellement des documents PDF.

3. Générer réellement un document PDF

Lors de l'appel de la méthode generatePDF, nous devons d'abord utiliser html2canvas pour générer une capture d'écran de page et convertir la capture d'écran en un document PDF Images en . Toutes les images sont finalement ajoutées au document 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')
}

Dans cette méthode, récupérez d'abord les éléments DOM qui doivent être convertis en PDF. Utilisez ensuite html2canvas pour convertir les éléments DOM en Canvas, puis convertissez le Canvas en données d'image au format DataURL. Ensuite, initialisez un objet jsPDF et définissez les propriétés de page du document PDF. Enfin, ajoutez la capture d'écran de la page au document PDF et divisez les pages selon que la hauteur de l'image dépasse ou non la hauteur de la page.

3. Démonstration d'effet

Dans le projet Vue, nous pouvons utiliser un exemple simple pour démontrer comment utiliser jsPDF et html2canvas pour générer des documents PDF. Dans cet exemple, nous allons afficher un texte et une image et les convertir en fichiers PDF. Le code dans le composant Vue est le suivant :

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

Ouvrez cet exemple dans le navigateur et cliquez sur le bouton "Générer un PDF" pour télécharger le fichier PDF généré dans le navigateur.

4. Résumé

L'utilisation de Vue, jsPDF et html2canvas pour générer des documents PDF peut facilement réaliser la fonction de génération de fichiers PDF sur le Web. Dans cet article, nous avons présenté comment installer et utiliser jsPDF et html2canvas, ainsi qu'un exemple d'utilisation de Vue pour générer des fichiers PDF. Je pense que grâce à l'introduction de cet article, les lecteurs peuvent facilement commencer à utiliser ces outils pour générer des documents PDF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!