html2canvas+jspdf html转PDF

问题：横向竖向滚动条导致无法截取完整图片

1解决方案：先将要截图的部分拷贝到body下方进行隐藏然后再进行捕抓

2解决方案：改下html2canvas源码：
主要是让用户调用时能够自定义需要截取Dom对象的宽和高

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });


改成

 //2016-02-18修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持
    var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
    var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
    return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
        if (typeof(options.onrendered) === "function") {
            log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
            options.onrendered(canvas);
        }
        return canvas;
    });

 

 

调用代码：
$('#downloadPDF').on('click', function (e) {
    var str = $(this).data('title')
    if ($('#b_selectform')[0] != undefined) {
        var obj = $('#selectform').serializeJSON();
        var b_obj = $('#b_selectform').serializeJSON();
        var arr = []
        for (var key in obj) {
            str += '_'+obj[key]
        }
        for (var key in b_obj) {
            str += '_' + b_obj[key]
        }
    } else {
        var obj = $('#selectform').serializeJSON();
        for (var key in obj) {
            str += '_' + obj[key]
        }
    }

    var element = $("body");    // 这个dom元素是要导出pdf的div容器
    var targetDom = $(".container");
    var copyDom = targetDom.clone();
    copyDom.children().find('.dataTables_scrollBody').removeAttr("style");
    copyDom.children().find('.dataTables_scrollHead').removeAttr("style");
    copyDom.children().find('.scrollx').css('overflow-x', 'visible');
    copyDom.attr('id', 'copy');
    copyDom.css('visable','hidden')
  //  copyDom.addClass('hidden');
    $('body').append(copyDom);   
    var width = $('body')[0].scrollWidth;    

    var canvasToPDF = function (canvas) {

        // $('#copy').empty();
        $('body').append(canvas);
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 592.28 / contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {    // 分页
            while (leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        pdf.save(str+'.pdf');
    }

    html2canvas(copyDom, {
        scale: 2,
        //dpi: 100,
        //pageSize:'A1',
        allowTaint: true,
        taintTest: false,  
   //   canvas: canvas,
        width: width,
        onrendered: canvasToPDF,
       background:'#F3F3F3'
       
    },);
   // html2canvas(element).then(function (canvas) {


      
    //console.log(str)
    //var copyContent = $('.container')[0].cloneNode(true);
    //copyContent.innerHTML = $('.container')[0].innerHTML
    
    //copyContent.style.position = "absolute";
    //copyContent.style.zIndex = "-999";
    //copyContent.className = 'container active'
    //document.body.appendChild(copyContent);
    //var imgArray = $('.container')[0].getElementsByTagName('img');
    //var down = new downLoad(imgArray);
    //console.log($('.active').find('.dataTables_scrollBody'))
    //$('.active .dataTables_scrollBody').css('overflow','visible')
    //down.init($('#downloadPDF'), $('.container')[0], str, 'a4');
 


    //-------------------------------------
    //exportPDF(){
    //    let targetDom = $(".container");
    //     let copyDom = targetDom.clone();
    //    let copyDom = $("<div/>");
    //    copyDom.addClass('super');
    //    copyDom.width(targetDom.width() + "px");
    //    copyDom.height(targetDom.height() + "px");
    //    $('body').append(copyDom);
    //    let cont = document.getElementBy('.container');
    //    console.log(targetDom);
    //    html2canvas(targetDom, {
    //         windowHeight:2000,
    //        height: cont.offsetHeight,//给canvas设置高度，
    //        onrendered: function (canvas) {
    //            console.log('回调开始');
    //            通过html2canvas将html渲染成canvas，然后获取图片数据
    //            let imgData = canvas.toDataURL('image/jpeg', 1.0);
    //             console.log(imgData);
    //            console.log(canvas.width, canvas.height);
    //            初始化pdf，设置相应格式
    //            let doc = new jsPDF("p", "mm", "a4");
    //             let doc = new jsPDF('', 'pt', 'a4')

    //            这里设置的是a4纸张尺寸
    //            doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);

    //            输出保存命名为content的pdf
    //            doc.save('report.pdf');
    //            移除dom中添加的元素
    //            $('.super').remove();

    //        }
    //    });
    //}

 

});