// 页面导出为pdf格式
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
import { ElMessage } from 'element-plus'

const htmlToPdf = {
  getPdf(title, id, callback) {
    var node = document.querySelector(id);
    node.style.height = node.scrollHeight + 'px'
    var dom = node.parentNode.innerHTML
    var canvasImg = null
    htmlToImage.toPng(node).then(function (dataUrl) {
      canvasImg = new Image();
      canvasImg.src = dataUrl
      node.parentNode.appendChild(canvasImg);
      html2Canvas(canvasImg, {
        allowTaint: false,
        taintTest: true,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 1, //将分辨率提高到特定的DPI 提高四倍
        scale: 1, //按比例增加分辨率
      }).then((canvas) => {
        var pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
        var ctx = canvas.getContext("2d"),
          a4w = 190,
          a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
          imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
          renderedHeight = 0;
        while (renderedHeight < canvas.height) {
          var page = document.createElement("canvas");
          page.className = 'pdf-canvas'
          page.width = canvas.width;
          page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
          //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page.getContext("2d").putImageData(
            ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight, canvas.height - renderedHeight)),
            0,0);
          pdf.addImage(
            page.toDataURL("image/jpeg", 1.0),
            "JPEG",10,10,a4w,Math.min(a4h, (a4w * page.height) / page.width)); //添加图像到页面，保留10mm边距
          renderedHeight += imgHeight;
          if (renderedHeight < canvas.height) {
            pdf.addPage(); //如果后面还有内容，添加一个空页
          }
        }
        pdf.save(title + ".pdf");
        node.parentNode.removeChild(canvasImg);
        if (callback) {
          callback()
        }
        ElMessage({ message: '导出成功！', type: 'success' })
        node.style.height = '100%'
      }).catch((err)=>{
        console.log(err)
        ElMessage({ message: '导出失败！', type: 'error' })
      })
    }).catch(function (error) {
      ElMessage({ message: '导出失败！', type: 'error' })
      console.error('oops, something went wrong!', error);
    });
  },
};
export default htmlToPdf;
