jspdf + html2canvas 實現(xiàn)html轉(zhuǎn)pdf (提高分辨率版本)

aisuhua 發(fā)布于2019-08-29 16:12 / 537人閱讀

摘要：用這個方法生成的有個問題還挺大的，就是生成的文件尤其是增大了分辨率以后都是大幾百的，稍微有點內(nèi)容的基本就將近了。暫時還未找到解決的方式。

剛解決了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語句：

...

下載pdf的點擊方法：

download(){
   var element = $("#demo");    // 這個dom元素是要導(dǎo)出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();    // 獲得當(dāng)前可視窗口的寬度（不包含滾動條）
   var win_o = window.innerWidth;    // 獲得當(dāng)前窗口的寬度（包含滾動條）
   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);    
   // 這里默認(rèn)橫向沒有滾動條的情況，因為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");

    //有兩個高度需要區(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();
            }
        }
    }
    pdf.save("我的簡歷.pdf");        
  })
}

本來想著偷懶，然后沒過審。用這個方法生成的pdf有個問題還挺大的，就是生成的文件（尤其是增大了分辨率以后）都是大幾百k的，稍微有點內(nèi)容的基本就將近1mb了。暫時還未找到解決的方式。往后找到了會補(bǔ)上

8.13更新：html2canvas(demo).then.. => 改為 html2canvas(element).then...
還有一個就是轉(zhuǎn)換的容器背景顏色最好設(shè)為白色，不然生成的pdf的空白區(qū)域默認(rèn)是黑色的，寫了可行的demo，等等上來貼地址

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