Complete guide to generating PDF using jsPDF and html2canvas in Vue

In recent years, PDF format documents have become the first choice for many people to write and share information. In web development, Vue, as a popular JavaScript framework, also provides many convenient tools to help us generate PDF documents. In this article, we will present a complete guide on how to generate PDF documents using Vue, jsPDF and html2canvas.

1. Introduction to jsPDF and html2canvas

1. jsPDF

jsPDF is a JavaScript library that generates PDF files, which can be used on the client. It can generate PDF documents including text, pictures, tables, etc., and supports functions such as adding watermarks and signatures to PDF documents.

2. html2canvas

html2canvas is a JavaScript library that converts HTML pages to Canvas. When using jsPDF to generate PDF documents, you can use html2canvas to generate page screenshots and convert the screenshots into images in the PDF document.

2. Installation and use

1. Install jsPDF and html2canvas

To install jsPDF and html2canvas, you can download the js of these two libraries through npm or from the official website document. In a Vue project, you can use npm to install it.

npm install jspdf html2canvas

2. Used in Vue project

In the Vue project, we need to introduce jsPDF and html2canvas into the components that need to generate PDF documents.

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

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

In this Vue component, we need to first introduce the libraries we need to use. In the data method, define a pdfDoc object to store the generated PDF document. In the methods method, define the generatePDF method to actually generate PDF documents.

3. Actually generate PDF documents

When calling the generatePDF method, we need to first use html2canvas to generate page screenshots and convert the screenshots into images in the PDF document. All pictures are finally added to the PDF document.

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

In this method, first obtain the DOM elements that need to be converted to PDF. Then use html2canvas to convert the DOM elements into Canvas, and then convert the Canvas into image data in DataURL format. Next, initialize a jsPDF object and define the page properties of the PDF document. Finally, add the page screenshot to the PDF document, and divide the pages according to whether the picture height exceeds the page height.

3. Effect Demonstration

In the Vue project, we can use a simple example to demonstrate how to use jsPDF and html2canvas to generate PDF documents. In this example, we will display a text and an image and convert them into PDF files. The code in the Vue component is as follows:

<template>
  <div>
    <div id="pdfContent">
      <p>这是一段文本</p>
      <img  src="/static/imghwm/default1.png"  data-src="../assets/example.png"  class="lazy" alt="Complete guide to generating PDF using jsPDF and html2canvas in Vue" >
    </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>

Open this example in the browser and click the "Generate PDF" button to download the generated PDF file in the browser.

4. Summary

Using Vue, jsPDF and html2canvas to generate PDF documents can easily realize the function of generating PDF files on the Web. In this article, we introduced how to install and use jsPDF and html2canvas, as well as an example of how to use Vue to generate PDF files. I believe that through the introduction in this article, readers can easily start using these tools to generate PDF documents.

The above is the detailed content of Complete guide to generating PDF using jsPDF and html2canvas in Vue. For more information, please follow other related articles on the PHP Chinese website!