评论:原生js打印插件Print.js  [查看原文]

所属分类:其他-独立的部件,杂项

 115744  479  59
当前第1页 / 共3页
    大大大悟空。0
    2021/9/18 14:04:44
    我想问问我用Print.js 打印的是一个dom,这个dom里面有多张图片,实现了分页但是每张图片都好小,有什么办法可以让图片铺满a4纸吗? 回复
    Hustle0
    2021/1/11 11:10:38
    打印时头部会出现document字样、页脚会有url怎么处理啊
        西瓜0
        2021/1/11 11:16:14

        这个在浏览器里设置,点击打印后点击更多设置,选项中的,页眉和页脚勾选去掉

        cc.png

    回复
    随雨听风0
    2020/3/27 9:12:35
    函数内的onStart和onEnd没法区分打印,还是取消,要是能区分就好了。还有我想问一下,可以设置打印内容在打印预览中的样式吗?比如说我要打印三张纸,每一张纸的内容垂直水平居中,剩下的自动挤到下一张纸。 回复
    to fly0
    2019/12/15 19:34:00
    大神,能不能给个分页教程?要打印多个单子,怎么让第二单不从中间分? 回复
    向着阳光0
    2019/12/4 10:35:10
    可以取消浏览器默认打印预览,直接打印吗 回复
    王智0
    2019/9/7 12:08:17
    background-color为啥打不了呢,我添加了background-image,依然没有打印效果,有同学碰到我这个问题了吗,打印radio和checkbox选中项
        ♥ Thorn0
        2020/8/16 23:30:58
        同添加了背景,没法赋上
    回复
    ---0
    2019/8/8 16:01:32
    跨越地址是有十几页的内容,可是打印的只有一页 回复
    130
    2019/8/5 12:28:55
    ie不兼容啊
        Horses、浩0
        2019/11/13 17:36:19
        回退版本
    回复
    xiaoyangzeizhuai19890
    2019/6/24 16:35:07
    table有横向滚动条,打印预览会被切掉一部分,这个怎么搞? 回复
    ?遮?0
    2019/4/23 15:07:38
    css 样式在预览的时候没用啊 回复
    jsjrdd0
    2018/12/7 22:16:48
    大神,这个能控制分页吗?
        charles2hang3
        2018/12/8 20:07:16

        1.源码里是没有分页的功能逻辑的
        2.涉及到table的打印,针对不同UI框架所实现的table甚至最基本的<table>要做到同时兼容分页是比较困难的。我在找到这个插件之后,为了实现分页需求也是与当前项目做了深度的耦合封装,分享一下大概的实现思路。
        3.关键的实现方法是利用下面的样式,所有含有pager类名的元素在打印时都会在它后面强制分页:

        .pager{ page-break-after: always; }

        主要的思路是利用while循环以及计数器,从打印区域height与screen.height中确定所有的分页打印点元素,将类名pager赋到该元素上即可。
        简单的类比:要在数轴区间[0.8,5.6]上确定多少个整数点,掐指一算可得1、2、3、4、5这五个数轴点,间隔=1。那么分页的时候是一样的,要在整个打印区域高度这个区间按照screen.height为间隔确定有多少个分页点

        jsjrdd0
        2018/12/8 23:36:54
        大神,怎么样才能在框架外点击按钮打印框架内的内容?我试了Print('#框架ID')发现只能打印第一页
    回复
    小马0
    2018/11/28 18:15:06
    楼主,为何每次点击打印 需要点击好几次 单机一次没反应,还有 火狐浏览器 点击打印 浏览器没反应
        wyzc20050
        2020/3/13 12:56:13
        楼主,我的firefox没问题。但是在edge使用发现第一次点击打印有效,再次点击无效。能解决吗?
    回复
    蓝色浪花0
    2018/11/9 16:23:55
    作者你好,如果我一个页面上有多个table,都是A4纸打印,要求其中有些横向打印,有些纵向打印,不想一个一个点打印,直接批量打印能实现吗 回复
    我行我素,爷乐意!0
    2018/9/25 18:19:49
    点击打印是空白的,为啥呀
        charles2hang3
        2018/9/25 23:57:34

        我看你8个月之前问过同样的问题,到现在还没解决,多少有点无言以对[叹气]。下面提供一些解决问题的思路吧

        1.在下7楼中写的一些注释中提到了--点击打印空白问题(有时):是因为代码逻辑里iframe加载与打印是异步执行的,很容易导致在document.execCommand('print')的时候,还没加载出来,所以是一片空白。针对修改在trycatch外层加上打印窗口window的onload回调,保证页面加载渲染完成再打印。

        w.onload = function() {
            try {
                setTimeout(function() {
                    w.focus();
                    try {
                        if (!w.document.execCommand('print', false, null)) {
                            w.print();
                        }
                    } catch (e) {
                        w.print();
                    }
                    w.close();
                }, 10);
            } catch (err) {
                console.log('err', err);
            }
            ......
        };

        2.下3楼中分享了一些如何调试打印样式问题的方法,能够通过打开新窗口(标签页)的方式,方便利用devtools实时调试样式问题,诸如为什么是空白的,为什么打印预览的样式跟写好的css不一致等。

        3.上述两种思路均涉及到修改源码,如果在实践思路或者在调试源码的过程中遇到了困难,建议仔细研究源码。

    回复
    火山灰0
    2018/9/12 21:04:39
    在中调用报错:Cannot read property 'outerHTML' of null
        charles2hang3
        2018/9/12 22:19:29

        1.老生常谈一下,show me the code。如果不是代码精简,靠一句报错就能找出问题真是大海捞针。拿不出代码,组织好语言,把问题的来龙去脉说清楚,也是码农的基本素养。
        2.回到正题,不出意外,报错应该发生在插件中获取样式的部分:

        getStyle: function() {
            var str = "",
                styles = document.querySelectorAll('style,link');
            console.log(styles);
            for (var i = 0; i < styles.length; i++) {
                str += styles[i].outerHTML; //此处报错,应该是styles数组中有null项导致,按照上两行打印出来看一下
            }
            return str;
        }

        a. 使用querySelectorAll,兼容性不太好,如IE10及以下均有大大小小的bug
        b.如果有使用jq或者zepto,可以将

        document.querySelectorAll('style,link')

        替换为

        $('style,link')

        作为兼容处理
        c.按上述代码把获取到的styles数组打印出来,看看哪一项是null,不过目测styles=[null],尤其仅有一个null项。具体情况具体分析具体处理,暂时只能分析到这了。

    回复

讨论这个项目(59)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

取消回复