最近在研究用jQuery做网页，结果出了个大问题：打印出来的东西不完全，客户看着难受，我心里也堵得慌。费劲心思才懂，原来不是jQuery的锅，而是浏览器的毛病。接下来我分享下我的理解和几个解决办法，希望能帮到大家。
一、浏览器分段加载的影响
每次用jQuery的print()函数，都会头疼不已：页面的图片和CSS就会变得乱糟糟，而且有时候浏览器还加载不完，结果只打印出加载好的那部分。比如要做个图片展示页这类内容多又复杂的网页，真的让人受不了！
二、浏览器对print()函数的限制
各种浏览器打印出来的东西真的差好多！像Safari就只打当前那一页，但是Firefox就只能打上面那些。难怪有时候打印出的效果和预想的根本不是一回事儿。为了解决这个问题，我得为每一个浏览器都设定专属的打印策略，这样大家用着也舒服些。
三、使用@mediaprint优化打印效果
打印时的CSS问题，用神奇的@mediaprint{}就搞定！它能帮助我们决定哪些元素需要打印，哪些留在屏幕后头。这样打印出的东西清晰、完整，棒极了！
visibility: hidden;
四、分步操作避免打印不全
visibility: visible;
告诉你个能让网页加载快点的妙招——用window.print()，可以把网页切成好几块儿再打出来。虽然费点儿劲儿，但真的有用！
position: absolute; left: 0; top: 0;
五、解决浏览器限制的具体方案
搞定了！我特地为各浏览器设计了打印代码。像Safari得先刷新页面才能打印，不过别的浏览器就直接window.print()就能搞定了。不论在哪儿，打印出的效果都不错呢～
六、复杂问题的处理与社区支持
搞项目碰到打印麻烦真让人头大，只好叫大神来帮忙。平时得多交流心得哈。我常上网找资料，去开发者论坛扯淡，看有啥新招儿没。多谢社区小伙伴们的热心相助！
totalPages = pages.length, currentPage = 0;
七、总结与未来展望
var printing = window.open('', '', 'width=800,height=600');
printing.document.write(pages[currentPage].innerHTML);
printing.document.close();
printing.focus();
setTimeout(function() {
printing.print();
printing.close();
if (currentPage < totalPages - 1) {
currentPage ++;
printCurrentPage();
}
}, 1000);
累死了，弄半天终于懂为啥jQuery搞不定打印，不过最终还不是给找出来了。虽然过程折腾了点，但也算长见识了。今后得多琢磨琢磨这种方法，说不定能帮到其他人遇到同样问题。
你在生活中遇到过文章提到的问题吗？是如何解决的呀？快来说说，大家也可以学习借鉴~觉得不错的话就点个赞转发出去！这样也许能帮助更多人！
评论0