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

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

//把要打印的區(qū)域用一個(gè)div套起來(lái)
//這里要注意
//1. printArea()只打印$("#printarea")里面的樣式，所以要把樣式寫在里面
//2. printArea()讀取圖片路徑的時(shí)候，只能讀取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">奉化太平洋購(gòu)物廣場(chǎng)有限公司</span></div><br>
            <div class="address"><span class="title2">  南山路174號(hào)</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">交易時(shí)間: 2017-03-28 10:07:00</span><br>
            <span class="title3">小 票 號(hào): 000201703281007003884</span><br>
            <span class="title3">POS機(jī)號(hào): 0000  收銀員號(hào): 100001</span><br>
            <span class="title3">會(huì)員卡號(hào): 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">商品名稱                       數(shù)量  金額</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      已優(yōu)惠: ￥1000.00</span><br>
            <span class="title3">儲(chǔ)值卡: ￥2000.00      銀行卡: ￥1000.00</span><br>
            <span class="title3">支付寶: ￥2000.00      微信: ￥2000.00</span><br>
            <span class="title3">用券優(yōu)惠: 滿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">實(shí)付金額: ￥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            當(dāng)前積分: 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>




//如何打印出圖片
        //定義方法，將圖片的路徑轉(zhuǎn)為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 是一個(gè)blob對(duì)象 就是文件對(duì)象  
                callback(this.status == 200 ? this.response : false);  
            };  
            xhr.send();  
            return true;  
        };
        
        $("img").each(function(){//遍歷所有圖片標(biāo)簽
        var $img = $(this);
        //調(diào)用轉(zhuǎn)換路徑的方法
        loadImageToBlob($(this).attr("src"), function(blobFile){// 
            if(!blobFile) {//判斷路徑是否為空，為空就不需要調(diào)用顯示圖片的方法了
                return false; 
            } 
                showLocalImage(blobFile,$img);
            });
        });
        當(dāng)選擇圖片之后,顯示圖片
         $("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);
            } 
        }