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

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(\'<image src="\'+img+\'" />\')
                        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;
        }
    }