Vue3中生成PDF文件|极客教程

Vue3中生成PDF文件

在Vue3中生成PDF文件是一个常见的需求，特别是在需要将网页内容保存为PDF文件或者生成动态内容的报表时。本文将介绍如何在Vue3中使用jsPDF和html2canvas两个库来实现生成PDF文件的功能。

1. 安装jsPDF和html2canvas

首先，我们需要安装jsPDF和html2canvas两个库。在Vue项目中，可以通过npm来安装这两个库。

npm install jspdf html2canvas --save

2. 创建生成PDF的组件

接下来，我们需要创建一个组件来生成PDF文件。在Vue项目中，我们可以创建一个单独的组件来实现这个功能。

<template>
  <div>
    <button @click="generatePDF">Generate PDF</button>
  </div>
</template>

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

export default {
  methods: {
    async generatePDF() {
      const input = document.getElementById('pdf-content');

      html2canvas(input).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 10, 10);
        pdf.save('file.pdf');
      });
    }
  }
};
</script>

在上面的代码中，我们首先引入了jsPDF和html2canvas库，并在按钮的点击事件中调用generatePDF方法。在generatePDF方法中，我们首先通过html2canvas库将要转换为PDF的内容转换为canvas，然后创建一个jsPDF实例，并将canvas转换为图片添加到PDF中。最后调用save方法保存生成的PDF文件。

3. 在App组件中引入生成PDF的组件

在App组件中引入刚刚创建的生成PDF的组件。

<template>
  <div>
    <pdf-component />
  </div>
</template>

<script>
import PdfComponent from './PdfComponent.vue';

export default {
  components: {
    PdfComponent
  }
};
</script>