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

2024-04-27 15:19:15

字体：大中小

来源：转载

供稿：网友

最近遇到项目中需要在浏览器中一键打印远程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代码：

二、直接修改浏览器的设置，还是以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="";//设置打印开始区域 eprnstr="";//设置打印结束区域 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); //打印预览 }

上一篇：LeetCode解题笔记（2）

下一篇：转载JS进行PDF/WORD/EXCEL文件打印的方法