如何打印modal中的内容

05 Jun 2017

这个用到的技术没有复杂的，关键是一种思想，我解决的时候查了各种方法都有弊端，比如修改document，可以保证打印的内容，但是取消打印的时候，即使你把内容重新修改回来，但是绑定的事件没有了。比如你如果用@media的print，你是无法打印modal中的完整内容的。

可以成功解决的一个方法思路如下：

1.把modal里面要打印的内容copy一份在页面,一定要插在body中，是body的第一层子元素之一(比如叫contentPrint)，然后把它隐藏。

2.点击打印的时候，将body的所有子元素隐藏，将contentPrint显示，然后window.print()

3.之后进行相反的显示隐藏操作即可。

                Related code:
                $('.modalPrint').on('click', function() {
                    $('body').children().addClass('hidden');
                    $('body').children('.contentPrint').removeClass('hidden');
                    window.print();
                    $('body').children().removeClass('hidden');
                    $('body').children('.contentPrint').addClass('hidden');
                };
            

此法在项目中用的，验证过虽然稍显麻烦但是有效。