vue2 导出pdf 分页不截断

以下是使用Vue2导出PDF并分页不截断的步骤：

1. 首先，安装所需的模块。在命令行中运行以下命令：

npm install html2canvas jspdf --save

2. 在Vue组件中，引入所需的模块：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

3. 创建一个方法来导出PDF。在该方法中，首先使用html2canvas将页面的HTML内容转换为图片，然后使用jsPDF将图片添加到PDF中。确保在转换为图片时，将页面分成多个部分以避免分页截断。

export default {
  methods: {
    exportPDF() {
      const pdf = new jsPDF('p', 'mm', 'a4');
      const pages = document.querySelectorAll('.page'); // 将页面分成多个部分

      let y = 0;
      pages.forEach((page, index) => {
        html2canvas(page).then(canvas => {
          const imgData = canvas.toDataURL('image/png');
          const imgWidth = pdf.internal.pageSize.getWidth();
          const imgHeight = (canvas.height * imgWidth) / canvas.width;

          if (index !== 0) {
            pdf.addPage();
          }

          pdf.addImage(imgData, 'PNG', 0, y, imgWidth, imgHeight);
          y += imgHeight;
          
          if (index === pages.length - 1) {
            pdf.save('export.pdf');
          }
        });
      });
    }
  }
}

4. 在Vue模板中，添加一个按钮来触发导出PDF的方法：

<template>
  <div>
    <!-- 页面内容 -->
    <div class="page">Page 1</div>
    <div class="page">Page 2</div>
    <div class="page">Page 3</div>

    <!-- 导出按钮 -->
    <button @click="exportPDF">导出PDF</button>
  </div>
</template>

这样，当用户点击导出按钮时，将会生成一个包含所有页面内容的PDF文件，并且页面内容不会被截断。