How to display an image in two pages in PDF using jsPDF?

前端 未结 6 1332
庸人自扰
庸人自扰 2020-12-14 05:03

I have a html page. In which I have a button , whenerever I click this button it will convert the entire html page into data image using html2canvas and placed it into PDF u

6条回答
  •  爱一瞬间的悲伤
    2020-12-14 05:36

    This may not be the perfect answer but still works

                    $("#btnSaveAsPDF").click(function () {
                    html2canvas($("#tblSaveAsPdf_canvas"), {
                    onrendered: function (canvas) {
                    var imageData = canvas.toDataURL("image/jpeg");
                    var image = new Image();
                    image = Canvas2Image.convertToJPEG(canvas);
                    var doc = new jsPDF();
                    doc.addImage(imageData, 'JPEG', 12, 10);
                    var croppingYPosition = 1095;
                    count = (image.height) / 1095;
    
                    for (var i =1; i < count; i++) {
                            doc.addPage();
                            var sourceX = 0;
                            var sourceY = croppingYPosition;
                            var sourceWidth = image.width;
                            var sourceHeight = 1095;
                            var destWidth = sourceWidth;
                            var destHeight = sourceHeight;
                            var destX = 0;
                            var destY = 0;
                            var canvas1 = document.createElement('canvas');
                            canvas1.setAttribute('height', destHeight);
                            canvas1.setAttribute('width', destWidth);                         
                            var ctx = canvas1.getContext("2d");
                            ctx.drawImage(image, sourceX, 
                                                 sourceY,
                                                 sourceWidth,
                                                 sourceHeight, 
                                                 destX, 
                                                 destY, 
                                                 destWidth, 
                                                 destHeight);
                            var image2 = new Image();
                            image2 = Canvas2Image.convertToJPEG(canvas1);
                            image2Data = image2.src;
                            doc.addImage(image2Data, 'JPEG', 12, 10);
                            croppingYPosition += destHeight;              
                        }                  
                    var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
                    filename = 'report_' + d + '.pdf';
                    doc.save(filename);
                }
    
            });
        });
    

提交回复
热议问题