安裝：npm i html2canvas --save
安裝：npm i jspdf

const PrintOrDownload = (isPrint, targetDom, printCont, nameTitle) => {
  // 獲取節(jié)點高度，后面為克隆節(jié)點設(shè)置高度。
  let height = targetDom.height;
  // 克隆節(jié)點，默認為false，不復(fù)制方法屬性，為true是全部復(fù)制。
  let cloneDom = targetDom.cloneNode(true);
  // 設(shè)置克隆節(jié)點的css屬性，因為之前的層級為0，我們只需要比被克隆的節(jié)點層級低即可。
  //cloneDom.style.backgroundColor = 'red';
  cloneDom.style.position = 'absolute';
  cloneDom.style.top = '0';
  cloneDom.style.index = '-1';
  cloneDom.style.padding = '40px 60px';
  cloneDom.style.height = height;
  // 將克隆節(jié)點動態(tài)追加到body后面。
  document.getElementById(printCont)?.appendChild(cloneDom);
  // 插件生成base64img圖片。
  html2canvas(cloneDom, {
    useCORS: true,
    // 畫布開始渲染的y坐標(biāo)位置
    y: 0,
  }).then((canvas) => {
    let contentWidth = canvas.width;
    let contentHeight = canvas.height;
    // 一頁pdf顯示html頁面生成的canvas高度;
    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 = (595.28 / contentWidth) * contentHeight;
    let pageData = canvas.toDataURL('image/jpeg', 1.0);
    // console.log('pageData', pageData);
    let pdf = new JsPDF(null, 'pt', 'a4');
    // 有兩個高度需要區(qū)分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
    // 當(dāng)內(nèi)容未超過pdf一頁顯示的范圍，無需分頁
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        // 避免添加空白頁
        position -= 841.89;
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    if (isPrint) {
      //打印
      // pdf.autoPrint()
      // pdf.output('dataurlnewwindow')
      var opener = window.open();
      var cont = document.getElementById(printCont).innerHTML;
      opener.document.write(cont);
      // setTimeout(() => {
      opener.print();
      // }, 1000)
    } else {
      //下載
      pdf.save(nameTitle || 'MyCoreHub' + '.pdf');
    }
    document.getElementById(printCont)?.removeChild(cloneDom);
  });
};

使用：
PrintOrDownload(true, pdfs.value, 'agreemnet-content', 'title值')