实现上传页面内容到后台，最终实现打印文档

使用插件到的js插件

<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jspdf.debug.js"></script>
<script type="text/javascript" src="jquery.js"></script>

实现的方法

1.先把页面指定内容通过html2canvas转为base64编码的图片，这边实现打印正反两面效果。所以首先需要生成两张图片

function btnDownloadPageBypfd2(pdf_container){ //参数是'#pdf_container' 或 '.pdf_container',注意带前缀
        var canvas = createNewCanvas(pdf_container);
        	
        html2canvas(g(pdf_container), {
            allowTaint: true,
            taintTest: true,
            canvas: canvas,
            onrendered: function(canvas) {

                var context = canvas.getContext('2d');
                // 【重要】关闭抗锯齿
                context.mozImageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;

                var imgData = canvas.toDataURL('image/jpeg',1.0);//转化成base64格式,可上网了解此格式


                var img = new Image();

                rotateBase64Img(imgData,90,function (res) {
                    img.src = res;
                    img.onload = function() {
                        img.width = img.width/14;   //因为我这边打印的格式大小有限制/14
                        img.height = img.height/14; //先放大了2倍，
                        img.style.transform="scale(0.5)";
                        console.log("img.width"+img.width);
                        console.log("this.width="+this.width);
                        console.log("this.height="+this.height);
                        
                        //p和l表示 横向保存还是竖向保存
                        if (this.width > this.height) {  //此可以根据打印的大小进行自动调节
                          var  doc = new jsPDF('l', 'mm', [54 , 86]);
                        } else {
                          var  doc = new jsPDF('p', 'mm', [54 , 86]);
                        }
                        doc.addImage(res, 'jpeg', 0, 0, this.width , this.height );
                        console.log("添加空白页"); //开始打印第二页的内容
                        addBackPageBypfd2('#pdf_container',doc);


                    }
                });


            },
            background: "#fff", //一般把背景设置为白色，不然会出现图片外无内容的地方出现黑色，有时候还需要在CSS样式中设置div背景白色
        });


        $('#pdf_container').removeClass('pdf');  //新建更大的画布，增强打印的清晰图，最后移除
    }

2.加载第二页的图片内容