浏览器
双核浏览器
游戏浏览器
高速浏览器
视频浏览器
IE浏览器
浏览器周边
手机浏览器
安卓游戏
音乐舞蹈
养成游戏
儿童游戏
仙侠手游
角色扮演
策略塔防
休闲益智
动作冒险
飞行射击
模拟经营
体育运动
赛车竞速
网络游戏
安卓软件
资讯阅读
生活服务
影音播放
购物理财
效率办公
趣味娱乐
交通出行
学习教育
摄影图像
在线音乐
系统工具
网络购物
聊天工具
安全杀毒
图片编辑
新闻资讯
软件资讯
游戏资讯
手机教程
手游攻略
游戏攻略
软件教程
IE专区
安卓专题
文章合集
电脑软件专题
安全软件
杀毒软件
系统安全
加密解密
防火墙
远程控制
木马查杀
影音软件
网络电视
视频播放
音乐播放
视频制作
音频编辑
录音录像
教育学习
外语学习
教育管理
早教启蒙
在线课堂
成人教育
资格考试
聊天社交
即时通讯
视频聊天
在线交友
变声器
表情包
办公软件
线上会议
文档管理
行业管理
考勤打卡
应用工具
输入法
下载工具
时钟日历
记事本
文件管理
计算器
编程开发
编程工具
JAVA相关
加壳脱壳
编程控件
数据库
网页源码
软件开发
补丁制作
系统美化
桌面制作
壁纸大全
系统主题
屏幕保护
桌面辅助
系统软件
系统优化
备份还原
系统检测
U盘工具
磁盘工具
驱动补丁
图文处理
图片素材
图像处理
图片制作
图片压缩
电子相册
抓图工具
其他软件
电子书籍
模拟器
辅助工具
交通出行
手机管理
其他工具
素材下载
字体素材
PPT素材
专区
文章合集
软件
游戏
浏览器
安卓专题
软件
游戏
浏览器
IEfans/ IE专区/ IE相关 /JS实现浏览器打印了吗?打印预览分享

JS实现浏览器打印了吗?打印预览分享

2020-08-05 10:17:03 编辑:匿名

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦。

1.JS实现打印的方式

方式一:window.print()

window.print();会弹出打印对话框,打印的是window.document.body.innerHTML中的内容,下面是从网上摘到的一个局部打印的例子,该例子的不足是打印会修改页面的内容。

JS实现浏览器打印了吗?打印预览分享

方式二:使用html 标签<object>引入Webbrowser控件

这种方式是其只兼容IE,其他浏览器不可使用,同时IE10以下的浏览器才可以使用,调用方式如下:

JS实现浏览器打印了吗?打印预览分享

这种方式优势是在IE下可以弹出打印预览,这是打印很人性化的功能,但是遗憾的是高版本的IE浏览器不支持WebBrowser了

方式三:采用document.execCommand(”print”)

该方式也兼容各个版本的浏览器,同window.print()一样,其启动的是打印对话框,chrome的打印对话框自带预览功能,但是IE、火狐仅仅只弹出打印设置对话框,没有预览功能。

方式四:采用JQuery插件

使用jQuery浏览插件可以很方便的进行局部打印,常用的插件有:

1)jquery.print.js

2)jquery.print-preview.js

这两种方式使用都很简单,1)通过$("#id").print(/*options*/);调用;2)通过$('#id').printArea(/*options*/); 其中的option可选项可以在下载地址下载下来后看示例代码,一般options不用传即可,示例代码如下:

JS实现浏览器打印了吗?打印预览分享

方式五:采用浏览器打印第三方插件

该方式需要用户浏览器安装相关的第三方插件,用户体验不好,故在此不细述了。

2.打印预览

chrome浏览器、win10自带的IE浏览器 调用打印弹出的打印设置界面中包含打印预览部分,故其通过上面的打印函数的调用即可实现。

IE9以后的版本、火狐不支持webbrowser控件了,JS调用不了浏览器的打印预览的功能,我们只能用iframe模拟打印预览的对话框,将需要打印的内容显示在该对话框中,然后在调用打印的功能实现打印。

1)jquery打印预览插件

jquery.print-preview.js

其实现的效果如下图(其自动的示例代码)

JS实现浏览器打印了吗?打印预览分享

2)webbrowser控件打印预览

IE8及以下版本可以调用WebBrowser.ExecWB(7,1) 函数弹出浏览器的打印预览对话框,采用该函数的好处是 用户可以在打印预览对话框中 调整页边距、页眉、页脚;

下面贴出的是设置页边距、页眉、页脚的JS代码


JS实现浏览器打印了吗?打印预览分享

JS实现浏览器打印了吗?打印预览分享

使用该函数,会弹出

JS实现浏览器打印了吗?打印预览分享

通过网页修改activex安全设置,添加信任站点,禁用该弹出窗口提示,代码如下:

JS实现浏览器打印了吗?打印预览分享

3.问题

1)网页修改activex安全设置该段代码也是必须在启用ActiveX的条件下调用成功,是需要用户在Internet的配置项中设置的(如下图),如何才能自动启用该插件?

JS实现浏览器打印了吗?打印预览分享

2) chrome、火狐如何通过JS设置页边距、页眉、页脚?

3) IE高版本浏览器、火狐如何通过JS弹出浏览器自己的打印预览?


相关推荐

浏览器更新