jspdf + html2canvas 實現html轉pdf (提升分辨率版本)

剛解決了html中某div塊生成pdf的問題，熱乎乎的，趕忙記錄下

引入的js傳送門：

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js
https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js

踩坑記錄：

1.生成的pdf中，dom元素間距異常；
2.提升分辨率後，生成的圖片有誤差

html語句：

<div id="demo">
    ...
</div>

下載pdf的點擊方法：

download(){
   var element = $("#demo");    // 這個dom元素是要導出pdf的div容器
   var w = element.width();    // 得到該容器的寬
   var h = element.height();    // 得到該容器的高
   var offsetTop = element.offset().top;    // 得到該容器到文檔頂部的距離
   var offsetLeft = element.offset().left;    // 得到該容器到文檔最左的距離
   var canvas = document.createElement("canvas");
   var abs = 0;
   var win_i = $(window).width();    // 得到當前可視窗口的寬度（不包含滾動條）
   var win_o = window.innerWidth;    // 得到當前窗口的寬度（包含滾動條）
   if(win_o>win_i){
     abs = (win_o - win_i)/2;    // 得到滾動條長度的一半
   }
   canvas.width = w * 2;    // 將畫布寬&&高放大兩倍
   canvas.height = h * 2;
   var context = canvas.getContext("2d");
   context.scale(2, 2);
   context.translate(-offsetLeft-abs,-offsetTop);    
   // 這裏默認橫向沒有滾動條的狀況，由於offset.left(),有無滾動條的時候存在差值，所以        
   // translate的時候，要把這個差值去掉
   html2canvas(element).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;
    var imgHeight = 592.28/contentWidth * contentHeight;

    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('個人簡歷.pdf');        
  })
}

原本想着偷懶，而後沒過審。用這個方法生成的pdf有個問題還挺大的，就是生成的文件（尤爲是增大了分辨率之後）都是大幾百k的，稍微有點內容的基本就將近1mb了。暫時還未找到解決的方式。日後找到了會補上

---

8.13更新：html2canvas(demo).then.. => 改成 html2canvas(element).then...
還有一個就是轉換的容器背景顏色最好設爲白色，否則生成的pdf的空白區域默認是黑色的，寫了可行的demo，等等上來貼地址

---

github demo地址：https://github.com/haryzxw/de...