vue项目中如何把页面导出为pdf格式文件

1. 安装依赖：npm install jspdf html2canvas
2. 在Vue组件中使用：

<template>
 <div>
   <button @click="exportPDF">导出PDF</button>
   <div ref="pdfContent">
     <!-- 这里是你想要导出的PDF内容 -->
     <h1>Hello, this is a PDF!</h1>
   </div>
 </div>
</template>

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

export default {
 methods: {
   async exportPDF() {
     const content = this.$refs.pdfContent;
     const canvas = await html2canvas(content,{ scale: 2 });
     const imgData = canvas.toDataURL('image/png');
     const doc = new jsPDF({
       orientation: 'portrait',
       unit: 'px',
       format: 'a4',
     });
     const imgProps= doc.getImageProperties(imgData);

     const pdfWidth = doc.internal.pageSize.getWidth();

     const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

     let heightLeft = pdfHeight;

     const pageHeight = pdfHeight;

     let position = 0;

     doc.addImage(imgData, 'PNG', 0, position, pdfWidth, pageHeight);

     // 分页

     heightLeft -= pageHeight;

     while (heightLeft >= 0) {

     position = heightLeft - pageHeight;

     doc.addPage();

     doc.addImage(imgData, 'PNG', 0, position, pdfWidth, pageHeight);

     heightLeft -= pageHeight;

      }
     doc.save('download.pdf');
   },
 },
};
</script>

3. 这段代码中，我们定义了一个exportPDF方法，它会在用户点击按钮时被触发。该方法首先使用html2canvas将Vue组件中指定的DOM元素转换为一个canvas元素，然后将canvas转换为一个图片，并使用jsPDF创建PDF文档，并添加转换得到的图片到PDF文档中。最后，使用doc.save()方法将PDF保存到用户的设备上。