首先我需要截圖的demo圖片很多很多,當我使用html2canvas轉的時候總是有一部分沒有截上，我上網上找了幾個辦法，都沒有解決，就很狗血無語，，
gitlab上好像沒有一直沒有回覆
最後我是使用的dom-to-image插件解決的 搭配jspdf
沖沖衝
順便問一下 有將頁面轉為pdf的功能嗎 不轉為canvas圖片 就是直接dom元素和樣式生成為pdf 可編輯
不分頁

export const downloadPDF = async (ele) => {
  var element = window.document.querySelector(ele); // 這個dom元素是要導出pdf的div容器
  console.log(element);
  if (!element) return;

  const resp = await domtoimage.toPng(element);
  let contentWidth = element.clientWidth;
  let contentHeight = element.clientHeight;

  // 設置pdf的尺寸，pdf要使用pt單位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
  // 2為上面的scale 縮放了2倍
  var pdfX = ((contentWidth + 10) / 2) * 0.75;
  var pdfY = ((contentHeight + 500) / 2) * 0.75; // 500為底部留白

  // 設置內容圖片的尺寸，img是pt單位
  var imgX = pdfX;
  var imgY = (contentHeight / 2) * 0.75; //內容圖片這裏不需要留白的距離

  var pdf = new jsPDF("p", "pt", [pdfX, pdfY]);
  // 將內容圖片添加到pdf中，因為內容寬高和pdf寬高一樣，就只需要一頁，位置就是 0,0
  pdf.addImage(resp, "jpeg", 0, 0, imgX, imgY);

  pdf.save(`1111f`);
};

分頁

export const downloadPDF = async (ele) => {
  var element = window.document.querySelector(ele); // 這個dom元素是要導出pdf的div容器
  console.log(element);
  if (!element) return;

  const resp = await domtoimage.toPng(element);
  let contentWidth = element.clientWidth;
  let contentHeight = element.clientHeight;

  let pageHeight = (contentWidth / 592.28) * 841.89;
  //未生成pdf的html頁面高度
  let leftHeight = contentHeight;
  //頁面偏移
  let position = 0;
  //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
  let imgWidth = 595.28;
  let imgHeight = (592.28 / contentWidth) * contentHeight;
  let pdf = new jsPDF("", "pt", "a4");

  //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
  //當內容未超過pdf一頁顯示的範圍，無需分頁
  if (leftHeight < pageHeight) {
    pdf.addImage(resp, "JPEG", 0, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      pdf.addImage(resp, "JPEG", 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      //避免添加空白頁
      if (leftHeight > 0) {
        pdf.addPage();
      }
    }
  }
  pdf.save('content.pdf');
};