將div的內容生成清晰的PDF、高清PDF

//需要引入html2canvas.js、jquery.js文件

html:

<button type="button" class="btn btn-primary " id="pdfDown" >PDf導出</button>

js:

$("#pdfDown").on('click',function(){
        var element = $(".orgchart");    // 這個dom元素是要導出pdf的div容器，即要生成PDF的div
        var w;    // 獲得該容器的寬
        var h;    // 獲得該容器的高
　　　　　//因為我是兩種分布情況，故而有了下邊的if、else，如果只有一種用else里的即可

        if($(".btnActive").attr('id') == 'Hmerage'){
            h = element.outerWidth()
            w = element.outerHeight()
        }else{
            w = element.outerWidth()
            h = element.outerHeight()
        }
        var offsetTop = element.offset().top;    // 獲得該容器到文檔頂部的距離
        var offsetLeft = element.offset().left;    // 獲得該容器到文檔最左的距離
        var canvas = document.createElement("canvas");
        canvas.width = w * 2;    // 將畫布寬&&高放大兩倍
        canvas.height = h * 2;
        var context = canvas.getContext("2d");
        var scale = 2;
        context.scale(2, 2);
        context.translate(-offsetLeft, -offsetTop);

        var opts = {
            scale: scale,
            canvas: canvas,
            width: w,
            height: h,
            useCORS: true,
            background: '#ffffff'
        }

        html2canvas(element, opts).then(function (canvas) {
          
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          //一頁pdf顯示html頁面生成的canvas高度;
          var pageHeight = contentWidth / 592.28 * 841.89;
          //未生成pdf的html頁面高度
          var leftHeight = contentHeight;
          //頁面偏移
          var position = 0;
          //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
          var imgWidth = 595.28*1.01;
          var imgHeight = 592.28 / contentWidth * contentHeight*1.01;

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new jsPDF('', 'pt', 'a4');

          //有兩個高度需要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
          //當內容未超過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();
                  }
              }
          }
          pdf.save('content.pdf');
      })  
    })