关于部分网页界面作为图片导出到pdf的日记

项目需求：要做pdf报表导出，而这个报表没有模板的，直接是html页面长什么样就导出到pdf就是什么样的。

在网上搜索了很久很久，一开始准备用itext。发现itext根本满足不了我的需求（前台用的是bootstrap，这个东西的样式里面有很多的字体样式跟itext不兼容）。

弄了很久很久，然后偶然发现一篇博客，使用前台js插件来截取界面作为图片导出pdf。

博客地址：http://www.cnblogs.com/yanweidie/p/5203943.html

做这个东西需要引入2个重要的js文件（基于jquery）：

<script type="text/javascript" src="${contextPath }/js/jspdf/jspdf.min-1.0.198.js"></script>
<script type="text/javascript" src="${contextPath }/js/jspdf/html2canvas-0.4.1.js"></script>

引入完成后，直接使用dom中的id定位到要导出pdf的内容，执行代码就可以看到效果了。

function jspdf(){

    //l:横向， p：纵向； 单位： in:英寸，mm毫米；px：像素；  画布大小：默认是A4纸大小
    var pdf = new jsPDF('p', 'mm', [230, 250]); //230 x 250
    html2canvas($("#jdpdfpanel"),{
        height: 12000, 
        onrendered:function(canvas){
            var imgData=canvas.toDataURL();
            pdf.addImage(imgData, 'JPEG', 5, 5, 225 , 235); //第3、4个参数是位置（x,y），第5、6个参数是宽，高  
            pdf.save(new Date().getTime()+'.pdf');
        }
    });
}

对于画布大小和图片的大小，个人认为还是自己慢慢调试，找到适合要导出的内容的大小。

导出后，基本与浏览器渲染的效果一致。