WEB中前台JS控制打印PDF文件

2/10/2017来源:心得技巧人气:4409

最近遇到项目中需要在浏览器中一键打印 远程PDF文件,经过网上搜集资料最终选择了在客户端安装adobe reader后,实现上从服务器端下载一个pdf文件流,在IE中用adobe插件打开(在前台页面中隐藏Object标签),然后用adobe的打印菜单通过PRintWithDialog()打印。 源码如下:

function bulkpdfPrint(srcFile){ var pdf = document.getElementById("createPDF"); if (pdf != undefined && pdf != null) {//判断pdf对象是否存在,如果存在就删除该对象 var parentNode = pdf.parentNode; parentNode.removeChild(pdf); } var p = document.createElement("object"); p.id = "createPDF"; p.classid = "CLSID:CA8A9780-280D-11CF-A24D-444553540000"; p.width = 1; p.height = 1;//若为0,在IE8中出错 p.src = encodeURI(encodeURI(srcFile));//解决中文pdf无法打开 document.body.appendChild(p); p.printAll(); } 打开浏览器窗口,页面中进行打印,开始点击打印时,弹出一个新的窗口window.open(url,”_blank”);//url为生成PDF的url,在这个新的页面中有PDF文件的内容,而且网页上也刚刚有打印的功能,这种看起来是最简单的,但是对用户而言,需要点击二次按钮才能真正打印。所以,用户体验不会太好。 adobe reader插件的方法,获取远程PDF文件URL,如果用户安装了PDF的浏览器支持,打开后用户的浏览器可以直接在浏览器中运行adobe reader加载项。然后由用户选择是否打印(一键打印PrintAll()或者PrintwithDialog())。实现简单,但需安装Adobe,在安装中一定程度上相当影响用户体验。本文最终选择这种方法。 百度文库的方法,使用Flash制作一个PDF阅读器,在flash上面加上打印按钮,不用用户安装了adobe reader阅读器,实现的技术却很高,而且用户要求不进行预览。 浏览器window.print()的方法,利用iframe,将PDF文件的内容包含其中,这个时候调用window.print()来弹出打印窗口。浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样,不能精确分页,不能设置纸型,可以让用户不用去点菜单,直接点击网页中的一个按钮,或一个链接里面调用。 代码如下: //创建一个空的iframe,因为如果每次请求都生成PDF,那么是不必要的。 <iframe style="display:none" id="printIframe"></iframe> $(document).ready(function(){ .... $("#printIframe").load(function(){//等待iframe加载完成后再执行doPrint.每次iframe设置src之后都会重新执行这部分代码。 doPrint(); }); .... }); //点击打印按钮,触发事件 function printPDF(){ var src = $("#printIframe").attr("src"); if(!src){//当src为空,即第一次加载时才赋值,如果是需要动态生成的话,那么条件要稍稍变化一下 $("#printIframe").attr("src","./attachment/Images.pdf");//暂时静态PDF文件 }else $("#printIframe")[0].contentWindow.print();//不知为什么在IE中一直无法打印文件 }

不知为什么我在IE中一直无法打印PDF文件,此外要使用浏览器自带的打印功能,还需要去掉那些页眉页脚信息。 一、通过javaScript 程序来设置,其实主要是用ActiveX控件来实现,出于安全方面的考虑,现在大多数浏览器已经禁用了“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”这一功能。如下图所示, 这个是以IE 8为例说明的,具体位置在:工具->Internet 选项->安全(最上面一排标签的第二个)->选中“Internet”图标时,单击“自定义级别”

因为这一功能是禁用的,所以通常Javascript或者其他脚本都无法生效,即无法通过程序直接实现,需要先解除这一禁止项,程序才能起作用,但解除禁止项后会带来安全方面的隐患。

相关JavaScript代码:

<script language="javascript"> <!-- var HKEY_Path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; // 定义注册表位置 // name的值可为header(页眉),footer(页脚),margin_bottom(下边距margin_left(左边距),margin_right(右边距),margin_top(上边距)。 function PageSetup(name,value) { try { var Wsh = new ActiveXObject("WScript.Shell"); Wsh.RegWrite(HKEY_Path+name,value); // 修改注册表值 }catch(e) { //alert(e.name+" "+e.message); //alert('需要运行ActiveX对象后,才能进行打印设置。'); } } function setit() { PageSetup("footer",""); PageSetup("header",""); window.print(); } //--> </script>

二、直接修改浏览器的设置,还是以IE8为例来进行说明

打开要打印的网页后,单击“文件”->“打印预览”->页面设置(图标,如下图所示)->页眉和页脚都设置为空,这样设置后,打印的时候就不会出现页眉页脚信息了。

三、直接修改注册表

打开记事本,复制下面的程序

Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup] "footer"="" "header"=""

另存为“去掉页眉页脚.reg”,然后双击运行,确认即可。 收藏一个JS 实现简单的页面局部打印的方法 :

function preview(oper) ...{ if (oper < 10)...{ bDHTML=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else ...{ window.print(); } }

使用很简单 将页面内要打印的内容加入中间XXXXX 再加个打印按纽 onclick=preview(1)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Webapplication2.Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" language="javascript"> function printdiv() { var newstr = document.getElementById("PrintContentDiv").innerHTML; //获得需要打印的内容 // alert(newstr); var oldstr = document.body.innerHTML; //保存原先网页的代码 document.body.innerHTML = newstr; //将网页内容更改成需要打印 window.print(); document.body.innerHTML = oldstr; //将网页还原 return false; } //打印页面预览 function printpreview() { var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'; document.getElementById("divButton").style.display = "none";//隐藏打印及其打印预览页面 document.body.insertAdjacentHTML('beforeEnd', WebBrowser); //在body标签内加入html(WebBrowser activeX控件) WebBrowser1.ExecWB(7, 1); //打印预览 }