js导出PDF

一、引用两个js库

<script src="/js/jspdf.debug.js"></script>
<script src="/js/html2canvas.js"></script>

二、实现导出PDF

/**
     * 导出PDF
     * @param id
     */
    exportPdf:function (id,filename,leftHeight) {
        html2canvas(
            document.getElementById(id), {
                dpi: 172, //导出pdf清晰度
                onrendered: function(canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //pdf页面偏移
                    var position = 0;
                    //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new jsPDF('', 'pt', 'a4');

                    //当内容未超过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(filename+'.pdf');
                },
                background: "#fff"
            })

三、解决div有滚动条，导出不了所有内容的问题

在 html2canvas方法前加入复制添加被导出dom的代码

 var copyDom = $("<div id='super'></div>");
 copyDom.width(content.width() + "px");
 copyDom.height(content.height() + "px");
 $('body').append(copyDom);

在实现导出后删除添加的元素

$('#super').remove();

四、解决导出的PDF分页造成内容截断的问题，导出一张PDF

注意：导出的时候不能滚动滚动条，否则上面的内容获取不到

if(nopage != undefined){ // 不分页
                    // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
                    var pdfX = (contentWidth + 10) * 0.75;
                    var pdfY = (contentHeight + 20) * 0.75; // 10为底部留白

                    // 设置内容图片的尺寸，img是pt单位
                    var imgX = pdfX;
                    var imgY = (contentHeight * 0.75); //内容图片这里不需要留白的距离

                    // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
                    var pdf = new jsPDF('', 'pt', [pdfX, pdfY]);

                    // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
                    pdf.addImage(pageData, 'jpeg', 0, 0, imgX, imgY);
                    pdf.save(fileName+'.'+fileType);
                }

 五、解决滑动了滚动条，导出内容不全

原因：当向下滑动滚动条时，子元素超出的内容被隐藏，此时截取图片是以可视窗口上面的坐标开始截取的。

实现思路是把div和页面的滚动条都移动到最上面即可

$("#produceDialog div:first").scrollTop(0);//移动div滚动条
window.scrollTo(0,0);//移动页面滚动条

在此期间碰到另外一个问题，设置div的scrollTop属性不生效，原因：

①：容器设置了overflow:hidden，超出内容被隐藏，需要设置成 auto 或 scroll

②：设置scrollTop的div元素不对，不是有滚动条的那个元素自然不生效。需满足前置条件：子级的div元素大于父级元素，父级元素overflow != hidden才会出现滚动条。设置的元素是直接父级元素，不是祖级