您的位置：首页 > Web前端 > JavaScript

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

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

源码如下：

<input type="button" value="toPrinter" onclick="directpdfprint('')">
<div id="createPDFDIV" style="text-align:center;margin:0 auto;height:1px;width:1px" ></div>
/**
* PDF文件直接打印 需安装adobe reader,并在浏览器加载项中启用Adobe加载项adobe PDF Reader;
* 可以打印带有汉字名称的PDF文件
*/
function directpdfprint(srcFile) {
debugger;
var pdfprint = document.getElementById("createPDF");
if (pdfprint != undefined && pdfprint != null) {
var parentNode = pdfprint.parentNode;
parentNode.removeChild(pdfprint);
}
var pdfprintdiv = document.getElementById("createPDFDIV");

var p = document.createElement("object");
try {
p.id = "createPDF";
p.classid = "CLSID:CA8A9780-280D-11CF-A24D-444553540000";
p.width = 1;
p.height = 1;
p.src = encodeURI(encodeURI(srcFile));// 处理中文名称
pdfprintdiv.appendChild(p);
p.printWithDialog();// 带打印窗口的直接打印
// p.printAll();//直接打印
} catch (e) {
// alert(e);
$.messager.alert("提示", '请确保已安装Adobe，并开启Adobe加载项！' + e, "warning");
}
}


打开浏览器窗口，页面中进行打印，开始点击打印时，弹出一个新的窗口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); //打印预览
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  web pdf 浏览器
相关文章推荐
新的分享
章节导航