html2canvas 生成图片后分割并生成PDF

丁胖子丶

项目上需要实现页面生成pdf后下载，通过各种搜索后利用 html2canvas + jspdf 可实现该效果，生成后，发现图片过长，超过了PDF单页后，图片被分割后图片在PDF中无上边距，于是又是搜搜搜，一下午一点有用的没搜到，不过缺看到不少类似问题，没办法只能自己搞了，于是有了下面的东西。

思路：利用canvas 以A4纸张标准进行进行图片裁剪为多个图片后，依次插入PDF

用到的相关js： polyfill.min.js html2canvas.js jspdf.min.js

说明：a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高，该处高度使用820是为了分割图片后给底部留出边距，不该紧贴PDF底部

html部分：
<canvas id="previewCanvas" width="595.28" height="820" style=";border:none;">
</canvas>
<div id="previewBox" class="main-content" style="padding:20px;">
        --------------该处是需要截图的内容！-------------
</div>

js部分：
//生成图片
function exportQuoteList(){
     $("#exportQuoteList").bind("click",function(){
          //l:横向， p：纵向； 单位： in:英寸，mm毫米；px：像素；  画布大小：默认是A4纸大小 
          var str = $('#previewBox');
          //添加字，以及字体大小设置
          html2canvas(document.getElementById('previewBox'), {
            background : "#fff",
              useCORS : true,//解决图片跨越的问题
              scale:2,
              dpi:1000,
              height : $("#previewBox").outerHeight(),
              onrendered : function(canvas) {
                   var contentWidth = canvas.width;
                   var contentHeight = canvas.height;
                   //var position = 20;
                   //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                   var imgWidth = 595.28;
                   var imgHeight = 592.28 / contentWidth * contentHeight;
                   //var pageData = canvas.toDataURL('image/png', 1.0);
                   var imgArr = [];
                   imgArr = splitImgFun(canvas,"previewCanvas",imgWidth,imgHeight);
//分割图片
function splitImgFun(canvas,bakCanvasId,imgWidth,imgHeight){//html2canvas 生成的canvas，备用canvas，图片宽度，图片高度
     var pdfName = "车辆维修保养报价单";
     var ctx = canvas.getContext("2d");
     var img = new Image();
     img.src = canvas.toDataURL("image/png",1.0);
     var arrLength = Math.ceil(imgHeight / 820);//向上取整算出分页页数
     var imgArr = [];                      //用来存储图片的数组
     var previewCanvas =document.getElementById(bakCanvasId);//获取备用画布
     var previewCtx = previewCanvas.getContext("2d");     
     img.onload=function(){  //要在onload中进行图片分割
          var y = 0;
          for(var i=0; i<arrLength; i++){
              var x = 0;
              ctx.drawImage( img, 0, 0, imgWidth, imgHeight); // img, x, y, w, h
              if(y+800 > imgHeight){
                   previewCanvas.height = imgHeight-y;//调整画布大小
              var imgData = ctx.getImageData(0,y,595.28,800);
              previewCtx.putImageData(imgData,0,0);
              imgArr.push(previewCanvas.toDataURL("image/png",1.0));
              y += 800;
              // ---------- JUST TO TEST
              //var slicedImage = document.createElement("img");
              //slicedImage.src = parts[i];
              //var div = document.getElementById("thisImg");
              //div.appendChild( slicedImage );
          exportPdf(imgArr,imgWidth,imgHeight,pdfName);
//导出PDF
function exportPdf(arr,imgWidth,imgHeight,pdfName){
     var pdf = new jsPDF('', 'pt', 'a4');
     var len = arr.length;
     for(var i=0;i<arr.length;i++){    //根据切好的图片数组进行分页
          pdf.addImage(arr[i], 'PNG', 0, 40, 595.28, 800);// img, PNG/JPG, x（左侧偏移）, y(上侧便宜), w, h,
          if(i<len-1){            //避免添加空白页
              pdf.addPage();