html2canvas+jspdf 完美解决html导出且分页 解决图片显示不全问题

    var pages = $(".page_re")

    function makeMpdf() {
        if (confirm("您确认下载该PDF文件吗?")) {
            /*1*/
            // var pdf = new jsPDF('p', 'pt', 'a4');
            // // 设置打印比例 越大打印越小
            // // pdf.internal.scaleFactor = 2.7;
            // var options = {
            //     pagesplit: true, //设置是否自动分页
            //     "background": '#FFFFFF'   //如果导出的pdf为黑色背景，需要将导出的html模块内容背景 设置成白色。
            // };
            // var printHtml = $('#pdf').get(0);   // 页面某一个div里面的内容，通过id获取div内容
            // layer.msg('正在生成，请稍等', {
            //     icon: 16,
            //     shade: 0.5
            // })
            // // $('.operbox a.btn').html('正在生成...')
            // // $('.operbox a.btn').attr("disabled", true);
            // pdf.addHTML(printHtml, 15, 15, options, function () {
            //     pdf.save('报告.pdf');
            // });
            /*2*/
            // layer.msg('正在生成，请稍等', {
            //     icon: 16
            //     , shade: 0.5
            // })
            // var pdf;
            // var width;
            // var height;
            // $(pages).each(function () {
            //     var mainRight = $(this);
            //     html2canvas(mainRight, {
            //         allowTaint: true,
            //         dpi: 96, // 提升画面质量，但是会增加文件大小
            //         background: '#FFFFFF',
            //         onrendered: function (canvas) {
            //
            //             var contentWidth = canvas.width;
            //             var contentHeight = canvas.height;
            //
            //             var pageData = canvas.toDataURL('image/jpeg', 1.0);
            //
            //             var pdfWidth = (contentWidth + 10) / 2 * 0.75;
            //             var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
            //
            //             var imgWidth = pdfWidth;
            //             var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
            //             // width += pdfWidth;
            //             // height += pdfHeight;
            //             var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);
            //             pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
            //             pdf.addPage();
            //         }
            //     })
            // })
            // pdf.save('体检报告_' + new Date().getTime() + '.pdf');
            //
            // console.log(js_getDPI());
            // return;
            /*3*/
            layer.msg('正在生成，请稍等', {
                icon: 16,
                shade: 0.5
            })
           // var element = document.getElementById("pdf");
            var pdf = new jsPDF('p', 'mm', 'a4');    //A4纸，纵向
            var length = $(pages).length;
            var img_arr = [];
           // var pages = $(pages).toArray().reverse();
            $(pages).each(function (index,value) {
                //$(this).scrollTop();
                // console.log($(this).offset().top)
                // return;
                 window.scrollTo(0,$(this).offset().top);//最为关键的地方 需要滚动到指定标签  否则图片不全
                html2canvas($(this), {
                    // useCORS: true,
                    // allowTaint:true,
                   // height: $("#pdf").outerHeight(),
                    logging: false,
                    // width:window.screen.availWidth,
                    // height:window.screen.availHeight,
                    windowWidth:document.body.scrollWidth,
                    windowHeight:document.body.scrollHeight,
                    background: '#FFFFFF',
                    x:0,
                    scrollY:$(this).offset().top,
                    async:false,//同步执行
                }).then(function (canvas) {
                    //onrendered: function (canvas) {
                      //  var ctx = canvas.getContext('2d');
                        //  var bl = canvas.height/22676;
                        a4w = 210, a4h = 297;
                        var img = canvas.toDataURL('image/png', 1.0);
                        // $('.images').append('')
                        pdf.addImage(img, 'PNG', 0, 0, a4w, a4h);
                        //添加图像到页面，保留10mm边距

                        //renderedHeight += imgHeight;
                        //if (renderedHeight < canvas.height)
                        delete canvas;

                        console.log(index)
                        if(index == (length - 1)){
                            var name = $('#order_name').val();
                            pdf.save(name + '体检报告.pdf');
                            return;
                        }else{
                            pdf.addPage();//如果后面还有内容，添加一个空页
                        }
                        layer.closeAll();
                    layer.msg('正在生成第'+(index+2)+'张...')

                });
            });
            //console.log(1);
            /*后端*/
            // var id = $('#order_id').val();
            // window.location.href = '/check_site/index/gene_pdf?id='+id;
        }
    }

 

转载于:https://www.cnblogs.com/Ychao/p/11325098.html