jspdf + html2canvas 實現html轉pdf (提高解析度版本)

立生發表於2019-02-16
JSHTMLCanvas

剛解決了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…

相關文章