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

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

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为间隔确定有多少个分页点

我看你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.上述两种思路均涉及到修改源码，如果在实践思路或者在调试源码的过程中遇到了困难，建议仔细研究源码。

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项。具体情况具体分析具体处理，暂时只能分析到这了。