ChuangHeng_new/src/components/reportPdf/exportPDF.js

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import axios from 'axios'
import Cookies from 'js-cookie'

// export const exportPDF = async (elementId, fileName = 'document.pdf') => {
export const exportPDF = async (element, fileName = 'document.pdf') => {
  // 获取要转换的DOM元素
  // const element = document.getElementById(elementId);
  if (!element) throw new Error('找不到目标元素');
  
  // 获取元素原始尺寸
  const originalWidth = element.scrollWidth;
  console.log(originalWidth,'originalWidth')
  const originalHeight = element.scrollHeight;
  console.log(originalHeight,'originalHeight')
  
  // 设置PDF参数
  const PDF_WIDTH = 210; // A4纸宽(单位:mm)
  const PDF_HEIGHT = 297; // A4纸高
  const PDF_PADDING = 10; // 页面内边距
  
  const pdf = new jsPDF('p', 'mm', 'a4');
  
  // 计算缩放比例
  const scale = PDF_WIDTH / originalWidth;
  console.log(scale,'scale')
  const canvasWidth = originalWidth;
  const canvasHeight = PDF_HEIGHT / scale;
  console.log(canvasHeight,'canvasHeight')
  
  // 计算总页数
  const pageCount = Math.ceil(originalHeight / canvasHeight);
  console.log(pageCount,'pageCount')
  
  // 循环渲染每一页
  for (let i = 0; i < pageCount; i++) {
    if (i > 0) pdf.addPage();
    
    // 计算当前页面的裁剪位置
    const canvas = await html2canvas(element, {
      scale: 2, // 提高分辨率
      scrollY: -window.scrollY,
      useCORS: true, // 开启跨域支持
      allowTaint: true, // 允许加载外部资源
      windowHeight: canvasHeight,
      y: canvasHeight * i,
      height: canvasHeight,
      width: originalWidth
    });
    if (i % 3 === 0) await new Promise(r => setTimeout(r, 200));
    
    // 将Canvas转换为图片
    const imgData = canvas.toDataURL('image/jpeg', 0.95);
    
    // 添加页面
    pdf.addImage(
      imgData,
      'JPEG',
      PDF_PADDING,
      PDF_PADDING,
      PDF_WIDTH - PDF_PADDING * 2,
      (canvas.height * PDF_WIDTH) / canvas.width - PDF_PADDING * 2
    );
    }

    const pdfBlob = pdf.output('blob');
    const formData = new FormData();
    formData.append('file', pdfBlob, fileName);
    const response = await axios.post(
        `${window.SITE_CONFIG["apiURL"]}/sys/oss/uploadFile`,
        formData,
        {
            headers: {
                'Content-Type': 'multipart/form-data',
                'token': Cookies.get('token') || ''
            }
        }
    );
    return response

  // 保存PDF
  // pdf.save(fileName);
};