前端导出pdf以及导出内容截断的解决办法


 $("#downpdf").on("click", function () {
        document.body.scrollTop=document.documentElement.scrollTop=0
        var id='task_report';
            html2canvas($("#"+id), {
                scale:2,
                background: "#FFFFFF",//如果指定的div没有设置背景色会默认成黑色,这里是个坑
                onrendered:function(canvas) {

                    //未生成pdf的html页面高度
                    var leftHeight = canvas.height;

                    var a4Width = 190
                    var a4Height = 277   //A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
                    //一页pdf显示html页面生成的canvas高度;
                    var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

                    //pdf页面偏移
                    var position = 0;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸,纵向
                    var index = 1,
                        canvas1 = document.createElement('canvas'),
                        height;
                    pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');

                    var pdfName='TriButte漏洞管理平台扫描报告';
                    function createImpl(canvas) {
                        console.log(leftHeight,a4HeightRef)
                        if (leftHeight > 0) {
                            index++;

                            var checkCount = 0;
                            if (leftHeight > a4HeightRef) {
                                var i = position + a4HeightRef;
                                for (i = position + a4HeightRef; i >= position; i--) {
                                    var isWrite = true
                                    for (var j = 0; j < canvas.width; j++) {
                                        var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                                        if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                            isWrite = false
                                            break
                                        }
                                    }
                                    if (isWrite) {
                                        checkCount++
                                        if (checkCount >= 10) {
                                            break
                                        }
                                    } else {
                                        checkCount = 0
                                    }
                                }
                                height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                                if(height<=0){
                                    height = a4HeightRef;
                                }
                            } else {
                                height = leftHeight;
                            }

                            canvas1.width = canvas.width;
                            canvas1.height = height;

                            console.log(index, 'height:', height, 'pos', position);

                            var ctx = canvas1.getContext('2d');
                            ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);

                            var pageHeight = Math.round(a4Width / canvas.width * height);
                            // pdf.setPageSize(null, pageHeight)
                            if(position != 0){
                                pdf.addPage();
                            }
                            pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4Width, a4Width / canvas1.width * height);
                            leftHeight -= height;
                            position += height;
                            if (leftHeight > 0) {
                                setTimeout(createImpl, 500, canvas);
                            } else {
                                pdf.save(pdfName + '.pdf');
                            }
                        }
                    }

                    //当内容未超过pdf一页显示的范围,无需分页
                    if (leftHeight < a4HeightRef) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                        pdf.save(pdfName + '.pdf')
                    } else {
                        try {
                            pdf.deletePage(0);
                            setTimeout(createImpl, 500, canvas);
                        } catch (err) {
                            // console.log(err);
                        }
                    }
                }
            })
    });

  

原文地址:https://www.cnblogs.com/ellisonzhang/p/12851068.html