ie 浏览器直接打印与非ie

名字越长技术越强

已于 2023-01-13 21:37:41 修改

阅读量964

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2022-06-17 19:29:50 首次发布

本文链接：https://blog.csdn.net/gaxing4615/article/details/125339106

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

目前打印常用：

lodop
pdfjs
printjs
非ie浏览器打印可用方案太多了，我直接使用Printjs

printJS({printable: PdfBase64, type: ‘pdf’, base64: true})

重点

IE浏览器
方案：pdfjs
直接上代码：

静默打印

document.getElementById(“WebBrowser”).ExecWB(6,2)

需求

打印pdf文件（包含二维码和签章），文件有纵向和横向（横向一般是汇总表单基本只有一页）

思路

判断表单是横向还是纵向
调用浏览器快捷键设置横向与纵向（这样其实很low,后面有优化说明）
用过pdfjs的frame加载文件流url

源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>'Hello, world!' example</title>

		<script src="jquery-3.3.1.js"></script>
		<script type="text/javascript" src="pdf.js"></script>
		<script type="text/javascript" src="LodopFuncs.js"></script>
			<OBJECT ID='WebBrowser' NAME="WebBrowser" WIDTH=0 HEIGHT=0 CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></OBJECT>
	</head>

	<body>
		<iframe id="viewinfo"></iframe>
	</body>
	<script>
// 去除页眉页脚
		function PageSetup_Null() {
			try {
				var Wsh = new ActiveXObject("WScript.Shell");
				HKEY_Key = "header";
				Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
				HKEY_Key = "footer";
				Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
				
				//设置左页边距（0）      
//				Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"10");       
//				HKEY_Key="margin_left";    
//				Wsh.RegWrite(HKEY_Root+HKEY_Path+HKEY_Key,"0");       
//				HKEY_Key="margin_right";  
		 
			} catch(e) {}
		}
		// 本质：按键命令  --设置横向打印
		function SetupLandscape() {
			try {
				var wsShell = new ActiveXObject("WScript.Shell");
				//打印页面的Menubar必须可见，此操作类似按键盘上的Alt+F+U也就是 调出页面设置对话框
				wsShell.sendKeys('%f');
				wsShell.sendKeys('u');
				//此操作类似按键盘上的Alt+A也就是 设置横向打印
				wsShell.sendKeys('%a');
				//此操作类似按键盘上的回车 页面设置对话框的默认焦点在 确定上 所以直接确定
				wsShell.sendKeys('{ENTER}');
			} catch(e) {}
		}
		window.onload = function() {
				var winWidth = parseInt(document.documentElement.clientWidth); // 客户端浏览器宽度

				var winHeight = parseInt(document.documentElement.clientHeight); // 客户端浏览器高度
				var param = location.search
				var myurl = param.substr(7)
				var myFrme = document.getElementById("viewinfo");

				myFrme.height = winHeight;
				myFrme.width = winWidth;
				myFrme.setAttribute("src", "../../resource/js/build/web/viewer.html?file=" + encodeURIComponent(myurl))

				setTimeout(SetupLandscape(),2000);
				setTimeout(function() {
				PageSetup_Null()
					document.getElementById("WebBrowser").ExecWB(6,2)
					}, 8000)
				}
	</script>

</html>

遇到的问题：

1、如何判断iframe是否成功加载结束了。
通过查看F12 看到每加载一页完成就给出 warn:globalCompositeOperation~is not supported,那么可以看做这一页加载完成的回调。
pdfjs:
在这里插入图片描述

2、其只会渲染当前所显示的页面，未显示的页面不会去渲染。这样就是造成，总共3的pdf结果打印发现只有1页甚至是半页。所以有想办法让所有页面都自动渲染完成，那就是第一页渲染完成后滚动Y轴到第二页，第二页完成后在滚动到第三页······
瞅了一眼发现，pdfjs中可以拿到总页数，其次还提供了 scrollView的方法，那就很nice,结合第一个问题，
在这里插入图片描述
3、最大的神级问题
缓存-------------------------------------------不是你写的不对，是因为TM有缓存
4、调用直接打印，只能打印到预览页面（预览只显示当前窗口的大小的界面），后续页面无法打印。
直接进去打印界面，加载渲染完成后，直接打印，只打印到预览界面。但是，鼠标点击pdf文件使其获得焦点后，调用打印就可以打印完整页面出来。
5、窗口关闭问题：
window.parent.close()
6、单页打印时候，会在后面新增空白页
原因：页边距造成的，所以············渲染时候修改吧
view.js:
在这里插入图片描述

电子签章不显示
解决：pdf.worker.js — 注释掉

//    if (this.data.fieldType === 'Sig') {
//      warn('unimplemented annotation type: Widget signature');
//      return false;
//    }

优化：

解决：横向打印问题

方案：lodop

场景：

目前我所处的场景是用户会先看到一个表单图片，点击打印后才去打印数据

思路：

直接使用lodop(需要先安装，自行百度)

LODOP.ADD_PRINT_IMAGE("0mm", "0mm", "RightMargin:0mm", "BottomMargin:0mm",document.getElementById("a").innerHTML);

遇到到问题：

采用PDFJS.getDocument+cavas 重新去绘制打印，结果无论是pdfbase64还url 都不无法正常运行。
原因：我也想知道
解决：采用lodop
数据预览只看到一半的表单数据
原因：首先使用的是LODOP.ADD_PRINT_HTML来装载img标签，无论如何去设置尺寸大小都不的行
解决：ADD_PRINT_IMAGE来装载img标签也是可以的，就解决了。

自助机问题：

最后记住一定需要在IE浏览器设置:
1.安全 -> 本地Intranet -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
2.安全 -> 受信任的站点 -> 自定义级别 - 找到ActiveX控件和插件项,选择对未标记为可安全执行的ActiveX控件初始化并执行脚本,再选择启用
3.安全 -> 受信任的站点 -> 站点 -> 添加受信任访问站点(如果是访问远程那么是对方IP地址,如果是本地则是本机IP