方式一：window.print()
整体打印
现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置
局部打印
首先，在html中，通过star和end来标记打印区域
然后，在点击事件中添加如下代码
function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr=""; eprnstr=""; prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); window.document.body.innerHTML=prnhtml; window.print(); }
过滤打印区域的内容
例如
上面的预览和打印按钮不希望打印，如果要过滤的话可以做下面的样式设置
@mediaprint {.noprint{display: none; } }
or
.noprint{display: none; }
两种写法任选其一
分页打印
使用window.print()打印时，如果内容超出会自动分页。但是我们如果需要自定义分页范围，如碰到表格分页打印，可以进行如下设置：
方式二、jqprint()
jqprint是一个基于jQuery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在Web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以轻松实现打印网页上的某个区域，这是个亮点。
请注意!很多朋友遇到Cannot read property 'opera' of undefined错误问题是juqery版本兼容问题
解决方法：加入迁移辅助插件jquery-migrate-1.0.0.js可解决版本问题
引入
js
functiona(){ $("#ddd").jqprint(); }
html
testtesttesttesttest
设置模板打印
$("#printContainer").jqprint({ debug:false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是falseimportCSS:true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件） printContainer:true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。 operaSupport:true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true});
附言
另外还可以使用html 标签引入Webbrowser控件（只兼容IE）或者调用windows底层打印，报安全警告，不建议使用（不支持局部打印）
作者：小果子_G
链接：https://www.jianshu.com/p/40dfd2d6c344
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
原文来源：https://www.jianshu.com/p/40dfd2d6c344?utm_source=tuicool&utm_medium=referral
