原生js打印

Html

Css

姓名	性别	爱好	籍贯	年轻	出生日期
张三	男	张三	男	张三	男
李四	男	张三	男	张三	男

* {
	padding:0;
	margin:0;
}

$('.pintBtn').click(function() {
    //			var oldData = $('#page1').html();
    //			 addprint();
    Print()
})

//动态创建的表格数据
function addprint() {

}

function Print() {

var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><style type='text/css'> * { padding: 0; margin: 0; } </style></head><body >";
    var content = "";
    for (var i = 0; i < 3; i++) {
        var strData = '<div style="page-break-after:always;"> <img class="imgLoad" src="http://www.jq22.com/img/cs/500x300-1.png" style=" width: 50px;height: 50px;" /> <h4>主标题</h4> <hr style="width: 200px;" /> <span>副标题</span><span>副标题</span><span>副标题</span> <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> <th>籍贯</th> <th>年轻</th> <th>出生日期</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>张三</td> <td>男</td> <td>张三</td> <td>男</td> </tr> <tr> <td>李四</td> <td>男</td> <td>张三</td> <td>男</td> <td>张三</td> <td>男</td> </tr> </tbody> </table> </div>';
        content += strData;
    }

printStr = printStr + content + "</body></html>";
    var pwin = window.open("Print.htm", 'print'); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要  
    pwin.document.write(printStr);
    //该元素在当前网页中 加载完 之后执行
    var imgs = pwin.document.getElementsByClassName("imgLoad");
    var imgdefereds = [];
    $(imgs).each(function() {
        var dfd = $.Deferred();
        $(this).bind('load', function() {
            dfd.resolve();
        }).bind('error', function() {
            //图片加载错误，加入错误处理
            // dfd.resolve();
        })
        if (this.complete) setTimeout(function() {
            dfd.resolve();
        }, 1000);
        imgdefereds.push(dfd);
    })
    $.when.apply(null, imgdefereds).done(function() {
        pwin.document.close();
        pwin.print();
    });
    //这句很重要，没有就无法实现
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js打印



代码描述：原生js实现分页打印可打印图片

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

丿嗨丶请叫我营

相关代码

主标题

原生js打印

最新