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;
        }
    }