// 1 生成页面；
// 2 页面转换成图片（  html2canvas ）；
// 3 图片导出成PDF（ jspdf ）
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
//element提示，可以不用。
import { Message } from 'element-ui'
// title：xxx.pdf
export const downloadPDF = (id, title) => {
  let odom = document.getElementById(id)
  html2canvas(odom, {
    //回调函数绘制的图片进行修改，不会影响到源dom
    onclone: (page) => {
      // 处理需要打印的odom存在竖直滚动条问题,横向没出现，未处理，思路一致
      let fDom = page.getElementById(id)
      // 获取odom整个内容高度
      let originHt = fDom.scrollHeight
      fDom.style.height = originHt + 'px'
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(fDom)
        }, 500)
      })
    }
  }).then(function (canvas) {
    // 下载生成的canvas,先查看canvas生成准不准确，再处理canvas生成pdf问题
    // var links = document.createElement("a");
    // links.href = canvas.toDataURL("image/png");
    // links.download = new Date().getTime() + ".png";
    // links.click();

    // canvas转成pdf
    canvas2PDF(canvas, title);
  }).catch(error => {
    Message({
      type: "error",
      message: error
    });
  })
};

const canvas2PDF = (canvas, title) => {
  // canvas---》pdf,考虑canvas内容超过一页pdf问题
  let contentWidth = canvas.width,
    contentHeight = canvas.height,
    //一页pdf显示html页面生成的canvas高度;
    pageHeight = contentWidth / 595.28 * 841.89,
    //未生成pdf的html页面高度
    leftHeight = contentHeight,
    //pdf页面偏移
    position = 0;
  //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
  let imgWidth = 555.28, imgHeight = 555.28 / contentWidth * contentHeight;
  const pageData = canvas.toDataURL('image/jpeg', 1.0);
  const pdf = new JsPDF('', 'pt', 'a4');
  //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
  //当内容未超过pdf一页显示的范围，无需分页
  if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
      leftHeight -= pageHeight;
      position -= 841.89;
      //避免添加空白页
      if (leftHeight > 0) {
        pdf.addPage();
      }
    }
  }
  pdf.save(title);
};
