利用html2canvas+jspdf实现页面导出成pdf功能源码

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

/**
 * 导出页面为 PDF
 * @param dom 需要导出的 DOM 元素
 * @param fileName 导出的文件名（不含后缀）
 */
export const useExportPDF = async (dom: HTMLElement, fileName: string) => {
  const element = dom;
  if (!element) {
    console.error('导出失败，未找到导出元素');
    return;
  }

  // 1. 解决滚动截断问题：获取元素实际高度
  const originalHeight = element.scrollHeight;
  // 临时设置高度为 auto，确保能截取到所有内容
  const originalStyleHeight = element.style.height;
  element.style.height = 'auto';

  try {
    // 2. 将 DOM 转换为 Canvas
    const canvas = await html2canvas(element, {
      useCORS: true, // 允许跨域图片
      scale: 2,      // 2倍缩放，解决模糊问题
      scrollY: -window.scrollY, // 修正滚动条偏移
      scrollX: 0,
      windowHeight: originalHeight, // 告诉 html2canvas 完整高度
    });

    // 3. 初始化 PDF 实例
    // p: 纵向, mm: 单位毫米, a4: 纸张格式
    const pdf = new jsPDF('p', 'mm', 'a4');
    
    // A4 纸内容宽度（留边距）
    const imgWidth = 190; 
    // 根据宽度计算等比例的高度
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    // 获取 PDF 页面可用高度
    const pdfPageHeight = pdf.internal.pageSize.getHeight(); 
    
    // 4. 处理分页逻辑
    let position = 0;
    
    // 第一页
    pdf.addImage(canvas, 'PNG', 10, 10 - position, imgWidth, imgHeight);
    position += pdfPageHeight; // 这里简化处理，按页面高度分页

    // 如果内容高度超过一页，循环添加新页
    while (position < imgHeight) {
      pdf.addPage();
      // 移动图片位置，实现视觉上的“接续”
      // 注意：这里简单的 position += pageHeight 可能需要根据实际情况调整，
      // 比如减去一些边距来防止文字被切断，Demo 中使用了简化的逻辑。
      pdf.addImage(canvas, 'PNG', 10, 10 - position, imgWidth, imgHeight);
      position += pdfPageHeight;
    }

    // 5. 保存文件
    pdf.save(`${fileName}.pdf`);
  } catch (error) {
    console.error('导出 PDF 异常:', error);
  } finally {
    // 6. 恢复原始样式
    element.style.height = originalStyleHeight;
  }
};

  <a-button type="primary" @click="exportPDF" v-if="disabled"> 导出PDF </a-button>

import { useExportPDF } from '/@/hooks/exportpdf/useExportpdf';
// 导出的 DOM 元素
const pdfContainer = ref<HTMLDivElement>(null); 
// 导出
      const exportPDF = async () => {
        loading.value = true;
        try {
          await useExportPDF(pdfContainer.value, 'xxxxpdf');
          loading.value = false;
        } catch (e) {
          console.log(e);
          loading.value = false;
        }
      };