vue 前端实现导出页面为pdf（分页导出、不分页导出、分模块导出）

在Vue前端实现导出页面为PDF文件，可以使用html2canvas和jspdf库。以下是一个简单的例子：

1. 安装依赖：

npm install html2canvas jspdf

2. 在Vue组件中使用：

<template>
  <div>
    <button @click="exportPDF">导出PDF</button>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
 
export default {
  methods: {
    async exportPDF() {
      const element = document.body; // 要导出为PDF的HTML元素
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
 
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: 'a4',
      });
 
      const imgProps= pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      let heightLeft = pdfHeight;
 
      const pageHeight = pdf.internal.pageSize.getHeight();
      let position = 0;
 
      pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
 
      // 导出PDF文件
      pdf.save('exported.pdf');
    },
  },
};
</script>

这个例子中的exportPDF方法会将整个页面导出为PDF。如果需要导出特定部分或者分页，可以修改html2canvas和jspdf的使用逻辑来实现。