打印预览 兼容ie8

打印预览 兼容ie8

  1. 引入jquery.print.js 和jq
    https://github.com/DoersGuild/jQuery.print
  $.print("#myElementId");//直接打印
  $("#myElementId").print({ // 打印预览
            globalStyles:true,//是否包含父文档的样式,默认为true
            mediaPrint:false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖,默认为false
            stylesheet:null,//外部样式表的URL地址,默认为null
            noPrintSelector:".no-print",//不想打印的元素的jQuery选择器,默认为".no-print"
            iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false就是说新开一个页面打印,默认为true,相当于预览,一般来说用这个就足够了
            append:null,//将内容添加到打印内容的后面
            prepend:null,//将内容添加到打印内容的前面,可以用来作为要打印内容
            deferred: $.Deferred()//回调函数
            });

问题

  1. 将需要打印的元素去掉滚动条,不然隐藏的元素不会打印。或者更改打印机的纸张大小

  2. 谷歌更多设置选中背景图像;ie>打印>页面设置>打印背景颜色和图像。否则打印出来的样式不全,图片没有

  3. 如果使用字体图标之类的,多选框的对勾。未选中的颜色要设为transparent,不能是其他颜色,打印是如果不设置打印背景,设置黑白色,会将白色对勾打印成灰色

  4. 如果打印使用栅格布局的元素,要设置不同屏幕下的占比,打印机会根据纸张大小来打印对应的元素;呃 意思就是 如果栅格布局只设置的1920以上的 打印机使用A4纸 元素就会掉下来

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
重点: <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0 VIEWASTEXT> </OBJECT> <input type=button value=打印 " class= "NOPRINT "> <input type=button value=直接打印 " class= "NOPRINT "> <input type=button value=页面设置 " class= "NOPRINT "> <input type=button value=打印预览 " class= "NOPRINT "> 注意: 1、CSS对打印的控制: <!--media=print 这个属性可以在打印时有效--> <style media=print> .Noprint{display:none;} .PageNext{page-break-after: always;} </style> Noprint样式可以使页面上的打印按钮等不出现在打印页面上,这一点非常重要,因为它可以用最少的代码完成最需要的功能 PageNext样式可以设置分页,在需要分页的地方 就OK了,呵呵 2、表格线粗细的设置,更是通过样式表: <style> .tdp { border-bottom: 1 solid #000000; border-left: 1 solid #000000; border-right: 0 solid #ffffff; border-top: 0 solid #ffffff; } .tabp { border-color: #000000; border-collapse:collapse; } </style> 或者: <style> .TdCs1 { border:solid windowtext 1.0pt; } .TdCs2 { border:solid windowtext 1.0pt; border-left:none; } .TdCs3 { border-top:none; border-left:solid windowtext 1.0pt; border-bottom:solid windowtext 1.0pt; border-right:solid windowtext 1.0pt; } .TdCs4 { border-top:none; border-left:none; border-bottom:solid windowtext 1.0pt; border-right:solid windowtext 1.0pt; } .underline { border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #000000; } </style> 1、控制 "纵打 "、 横打”和“页面的边距。 (1) [removed] function SetPrintSettings() {  // -- advanced features  factory.printing.SetMarginMeasure(2) // measure margins in inches  factory.SetPageRange(false, 1, 3) // need pages from 1 to 3  factory.printing.pri

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值