使用PrintArea打印页面

//引入js
<script src="lib/js/jquery.PrintArea.js" type="text/javascript"></script>

//调用js的printArea()方法
<script type="text/javascript">
  $("#printarea").printArea();
</script>

//把要打印的区域用一个div套起来
//这里要注意
//1. printArea()只打印$("#printarea")里面的样式，所以要把样式写在里面
//2. printArea()读取图片路径的时候，只能读取blob格式的路径，具体方法看最下面
    <div id="ticket_dialog">
    <div id="printarea">
    <style>
        .topimg img{
            text-align: left;
            width: 300px;
            height: 150px;
            margin-left: 5px;
        }
        .imgclass img{
             width: 18px;
             height: 18px;
             }
        .imgclass{
             margin-left: 50px;
        }
        .barcode img{
             text-align: center;
             width: 250px;
             height: 40px;
             margin-left: 25px;
        }
        .title1{
            font-size: 14px;
            font-family: 黑体;
            font-weight:bold;
        }
        .address{
            text-align: left;
            margin-left: 210px;
        }
        .tel{
            text-align: left;
            margin-left: 210px;
        }
        .title2{
            font-size: 10px;
            font-family: 黑体;
        }
        .xiaopiao{
            text-align: left;
            margin-left: 23px;
        }
        .title3{
            font-size: 12px;
            font-family: 黑体;
            line-height: 17px;
        }
        .commoditytitle{
            text-align: left;
            margin-left: 23px;
        }
        .title4{
            font-size: 12px;
            font-family: 黑体;
            font-weight:bold;
        }
        .commoditydiv{
            margin-left: 23px;
        }
        .footdiv >span{
            margin-left: 23px;
            line-height: 20px;
        }
        .total{
            text-align: left;
            margin-left: 125px;
        }
        .title5{
            font-size: 16px;
            font-family: 黑体;
            font-weight:bold;
        }
    </style>
        <form id="ticketform">
        <div>
            <div class="topimg"><img src="" id="image"></div><br>
            <div class="imgclass">![](lib/images/logo1.png)<span class="title1">奉化太平洋购物广场有限公司</span></div><br>
            <div class="address"><span class="title2">  南山路174号</span><br>
            <span class="title2">0574-88575888</span></div>
            <hr style="border:1 dashed #987cb9; margin-left:50px; text-align:left" width="206"  SIZE="1">
            <div class="xiaopiao"><span class="title3">交易时间: 2017-03-28 10:07:00</span><br>
            <span class="title3">小 票 号: 000201703281007003884</span><br>
            <span class="title3">POS机号: 0000  收银员号: 100001</span><br>
            <span class="title3">会员卡号: 000201703281007003884</span></div>
            <hr style="border:1 dashed #987cb9; margin-left:50px; text-align:left" width="206"  SIZE="1">
            <div class="commoditytitle"><span class="title4">商品名称                       数量  金额</span></div>
            <div class="commoditydiv"><span class="title3">1200004</span><br>
            <span class="title3">周大福投资金条                  1   2000.00</span><br>
            <span class="title3">1200004</span><br>
            <span class="title3">周大福投资金条                  1   2000.00</span><br>
            <span class="title3">1200004</span><br>
            <span class="title3">周大福投资金条                  1   2000.00</span><br>
            <span class="title3">1200004</span><br>
            <span class="title3">周大福投资金条                  1   2000.00</span></div>
            <hr style="border:1 dashed #987cb9; margin-left:50px; text-align:left" width="206"  SIZE="1">
            <div class="commoditytitle"><span class="title3">总金额: ￥8000.00      已优惠: ￥1000.00</span><br>
            <span class="title3">储值卡: ￥2000.00      银行卡: ￥1000.00</span><br>
            <span class="title3">支付宝: ￥2000.00      微信: ￥2000.00</span><br>
            <span class="title3">用券优惠: 满1000-300</span><br></div>
            <hr style="border:1 dashed #987cb9; margin-left:50px; text-align:left" width="206"  SIZE="1">
            <div class="total"><span class="title5">实付金额: ￥6700.00</span></div>
            <hr style="border:1 dashed #987cb9; margin-left:15px; text-align:left" width="277"  SIZE="1">
            <div class="footdiv"><span class="title3">本次积分: 8000            当前积分: 40000</span></div><br>
            <div class="barcode">![](lib/images/barcode.png)</div>
            <div id="feetd"></div>
            <div class="hiddendiv">
                <input type="hidden" name="operflag" id="hidden_operflag" value="ADD"/>
            </div>
        </div>
        </form>
        </div>
        <div class="fieldbutton">
            <input type="button" id="print" value="打印">
            <input type="button" id="input_submit" value="提交"><br>
            <input type="file" id="image">
            </div>
    </div>




//如何打印出图片
        //定义方法，将图片的路径转为blob形式并返回
        var loadImageToBlob = function(url, callback) {  
            if(!url || !callback) return false;  
            var xhr = new XMLHttpRequest();  
            xhr.open('get', url, true);  
            xhr.responseType = 'blob';  
            xhr.onload = function() {  
                // 注意这里的this.response 是一个blob对象 就是文件对象  
                callback(this.status == 200 ? this.response : false);  
            };  
            xhr.send();  
            return true;  
        };
        
        $("img").each(function(){//遍历所有图片标签
        var $img = $(this);
        //调用转换路径的方法
        loadImageToBlob($(this).attr("src"), function(blobFile){// 
            if(!blobFile) {//判断路径是否为空，为空就不需要调用显示图片的方法了
                return false; 
            } 
                showLocalImage(blobFile,$img);
            });
        });
        当选择图片之后,显示图片
         $("input[type='file']").change(function(){
            $fileinput = $(this);
            var files = this.files;
            var $img = $("#image");
            showLocalImage(files[0],$img);
        }); 
         //图片展示
        function showLocalImage(file,img){
            if(file.type.match("image.*")){
                var reader = new FileReader();
                reader.onload = function(e){
                    img.attr("src",this.result); 
                };  
                reader.readAsDataURL(file);
            } 
        }