js打印window.print()图片打印

1. 这里用的是A4纸,设置打印表格属性(width:100%,height:980px)

2.由于打印可能存在多页,所以heightt属性必须严格控制。

3.由于自己是先隐藏不需要打印的DIV,然后显示需要打印的DIV。当需要打印的DIV存在图片等资源导致加载较慢时。window.print又是异步的,所以存在图片没加载完就打印的情况。

解决方案:判断图片是否加载完成,加载完成在调用打印。(直接.onload不行,当浏览器有 缓存时不会进入方法)

var t_img; // 定时器
var isLoad = true; // 控制变量(判断图片是否 加载完成)

isImgLoad(function(){//判断全部打印图片加载完成
            window.print();
            // 加载完成
        });

//判断图片加载的函数
function isImgLoad(callback){
    // 查找所有打印图,迭代处理
    $('.printImg').each(function(){
        // 找到为0就将isLoad设为false,并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }
    });
    // 为true,没有发现为0的。加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    // 为false,因为找到了没有加载完成的图,将调用定时器递归
    }else{
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描
        },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
    }
}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值