ECG/src/utils/htmlPdf.js

import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'

const htmlToPdf = {
  getPdfBase64(title, id) {
    return new Promise((resolve) => {
      html2Canvas(document.querySelector(id), {
        allowTaint: false,
        taintTest: false,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
        scale: 4 // 按比例增加分辨率
      }).then((canvas) => {
        const pdf = new jsPDF('p', 'mm', 'a4') // A4纸，纵向
        const ctx = canvas.getContext('2d'),
          a4w = 190,
          a4h = 272 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度
          renderedHeight = 0

        while (renderedHeight < canvas.height) {
          const page = document.createElement('canvas')
          page.width = canvas.width
          const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
          page.height = pageHeight

          // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page
            .getContext('2d')
            .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0)
          pdf.addImage(
            page.toDataURL('image/jpeg', 1.0),
            'JPEG',
            10,
            10,
            a4w,
            Math.min(a4h, (a4w * page.height) / page.width)
          ) // 添加图像到页面，保留10mm边距

          renderedHeight += pageHeight
          if (renderedHeight < canvas.height) {
            pdf.addPage() // 如果后面还有内容，添加一个空页
          }
        }
        const pdfBase64String = pdf.output('datauristring') // 获取 base64 编码的 PDF 文件
        resolve(pdfBase64String) // 解析 base64 字符串
      })
    })
  },

  getPdf(title, id) {
    html2Canvas(document.querySelector(id), {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
      scale: 4 // 按比例增加分辨率
    }).then((canvas) => {
      const pdf = new jsPDF('p', 'mm', 'a4') // A4纸，纵向
      const ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度
        renderedHeight = 0

      while (renderedHeight < canvas.height) {
        const page = document.createElement('canvas')
        page.width = canvas.width
        const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
        page.height = pageHeight

        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext('2d')
          .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0)
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ) // 添加图像到页面，保留10mm边距

        renderedHeight += pageHeight
        if (renderedHeight < canvas.height) {
          pdf.addPage() // 如果后面还有内容，添加一个空页
        }
      }
      pdf.save(title + '.pdf') // 保存 PDF 文件
    })
  },
  getPdfh(title, id) {
    html2Canvas(document.querySelector(id), {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: 300, // 将分辨率提高到特定的DPI 提高四倍
      scale: 1 // 按比例增加分辨率
    }).then((canvas) => {
      const pdf = new jsPDF('l', 'mm', 'a4') // A4纸，纵向
      const ctx = canvas.getContext('2d'),
        a4w = 190,
        a4h = 272 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      let imgHeight = Math.floor((a4h * canvas.width) / a4w), // 按A4显示比例换算一页图像的像素高度
        renderedHeight = 0

      while (renderedHeight < canvas.height) {
        const page = document.createElement('canvas')
        page.width = canvas.width
        const pageHeight = Math.min(imgHeight, canvas.height - renderedHeight) // 可能内容不足一页
        page.height = pageHeight

        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext('2d')
          .putImageData(ctx.getImageData(0, renderedHeight, canvas.width, pageHeight), 0, 0)
        pdf.addImage(
          page.toDataURL('image/jpeg', 1.0),
          'JPEG',
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ) // 添加图像到页面，保留10mm边距

        renderedHeight += pageHeight
        if (renderedHeight < canvas.height) {
          pdf.addPage() // 如果后面还有内容，添加一个空页
        }
      }
      pdf.save(title + '.pdf') // 保存 PDF 文件
    })
  },
  getDivContentAsBase64(divId) {
    return new Promise((resolve, reject) => {
      // 获取div元素
      const divElement = document.querySelector(divId)
      if (!divElement) {
        console.error('未找到指定ID的div元素')
        reject('未找到指定ID的div元素')
        return
      }

      // 使用html2canvas捕捉div内容
      html2Canvas(divElement, {
        width: divElement.offsetWidth + 4,
        height: divElement.offsetHeight + 6,
        dpi: 300, // 设置300DPI
        scale: 2.4, // 保持原始比例
        useCORS: true, // 如果内容包含跨域图片，需要设置为true
        allowTaint: false // 是否允许跨域图片导致画布被污染
      })
        .then((canvas) => {
          // const pdf = new jsPDF({
          //   orientation: 'l', // 纵向
          //   unit: 'px', // 使用像素作为单位
          //   format: [1920, 820] // 自定义页面尺寸，与图片尺寸一致
          // });
          const pdf = new jsPDF({
            orientation: 'l',
            unit: 'px',
            format: [canvas.width, canvas.height]
          })
          // 将canvas转换为图片数据URL
          const imgData = canvas.toDataURL('image/jpeg', 1) // 1.0表示最高质量
          //  pdf.addImage(imgData, 'JPEG', 0, 0, canvas.width, canvas.height);
          // // 设置 PDF 页面尺寸
          // // pdf.addImage(imgData, 'JPEG', 10, 10, 1920, 820)
          // const link = document.createElement('a');
          // link.download = `${divId}-image.jpeg`;
          // link.href = imgData;
          // link.click();
          // pdf.save('111.pdf')
          // 解决Promise并返回图片的base64字符串
          //  pdf.save(`${divId}-content.pdf`);
          resolve(imgData)
        })
        .catch((error) => {
          console.error('生成图片过程中发生错误:', error)
          reject(error)
        })
    })
  },
  createPdfFromBase64(base64Image) {
    return new Promise((resolve, reject) => {
      // 使用html2canvas捕捉div内容（这里不需要，但保留以备后续使用）
      // html2Canvas(divElement, { ... }).then(canvas => {
      // 将base64字符串转换为Blob对象
      const blob = base64ToBlob(base64Image)

      // 创建一个URL对象
      const url = URL.createObjectURL(blob)

      // 创建一个新的Image对象
      const img = new Image()
      img.onload = () => {
        // 创建PDF对象
        const pdf = new jsPDF({
          orientation: 'l',
          unit: 'px',
          format: [img.width, img.height]
        })

        // 将图片添加到PDF
        pdf.addImage(img, 'JPEG', 0, 0, img.width, img.height)

        // 获取PDF的base64字符串
        const pdfBase64 = pdf.output('datauristring')

        // 解决Promise并返回PDF的base64字符串
        resolve(pdfBase64)

        // 清理URL对象
        URL.revokeObjectURL(url)
      }
      img.onerror = (error) => {
        console.error('图片加载失败:', error)
        reject(error)
      }
      img.src = url
    })
  }
}
// 辅助函数：将base64字符串转换为Blob对象
function base64ToBlob(base64) {
  const binary = atob(base64.split(',')[1])
  const array = []
  for (let i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i))
  }
  return new Blob([new Uint8Array(array)], { type: 'image/jpeg' })
}
export default htmlToPdf