html中实现添加水印的功能 / 在jsp页面上直接打开PDF文件
2017-09-08 09:55
1586 查看
最近项目需求中需要在html中添加水印效果,试验了一下几种方法
1、使用背景图添加水印
2、使用定位添加水印
3、使用js添加可配置控制水印
CSS:
HTML
JavaScript
代码来源:http://www.cnblogs.com/GongQi/p/4074609.html(目前我采用的方式)
2、 如果访问者的计算机上没有装acrobat reader,直接用iframe或者直接用链接打开,那就不是打开文档,而是直接下载了,为了防止下载,想像到媒体文件的播放方式,加上一些官方的docs,考虑用用object标签使用pdf插件嵌入ie中
3、在网页中直接显示pdf格式的文件方便阅读。但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了,不过还是贴出来了,各取所需吗。(1.pdf要改成自己的pdf文件路径插入到页面文件中)
以上文章转自: http://blog.csdn.net/xxyy888/article/details/7259819#comments
1、使用背景图添加水印
2、使用定位添加水印
3、使用js添加可配置控制水印
CSS:
body{background-color: #eef1f8;} #one{padding: 10px 15px;background-color: #FFFFFF;background-image: url(http://pic.58pic.com/58pic/12/28/02/05J58PICUwy.jpg);background-repeat: no-repeat;background-size: 50%;background-position: center;opacity: 0.9;} #two{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;position: relative;} #three{padding: 10px 15px;background-color: #FFFFFF;margin-top: 10px;} #two-bg{position: absolute;top:0;right:0;left:0;z-index: 0;width: 200px;height: 200px;} #two-bg img{width: 100%;}
HTML
<!--使用背景图添加水印--> <div id="one"> <p>这是一段文字</p> <ul> <li>这是第1个</li> <li>这是第2个</li> <li>这是第3个</li> <li>这是第4个</li> <li>这是第5个</li> </ul> </div> <!--使用定位添加水印--> <div id="two"> <p>这是一大段文字照着找着做做做做做做做做做做做做做做做</p> <ul> <li>这是第1个</li> <li>这是第2个</li> <li>这是第3个</li> <li>这是第4个</li> <li>这是第5个</li> </ul> <!--图片透明 png格式的图片--> <div id="two-bg"><img src="img/search.png"/></div> </div> <!----> <div id="three"> <p>看看看看扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩扩</p> <ul> <li>这是第1个</li> <li>这是第2个</li> <li>这是第3个</li> <li>这是第4个</li> <li>这是第5个</li> </ul> </div>
JavaScript
代码来源:http://www.cnblogs.com/GongQi/p/4074609.html(目前我采用的方式)
watermark({ watermark_txt: "测试水印" })//传入动态水印内容 function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:100,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:20,//水印行数 watermark_cols:20,//水印列数 watermark_x_space:100,//水印x轴间隔 watermark_y_space:50,//水印y轴间隔 watermark_color:'#000000',//水印字体颜色 watermark_alpha:0.3,//水印透明度 watermark_fontsize:'18px',//水印字体大小 watermark_font:'微软雅黑',//水印字体 watermark_width:120,//水印宽度 watermark_height:80,//水印长度 watermark_angle:15//水印倾斜度数 }; //采用配置项替换默认值,作用类似jquery.extend if(arguments.length===1&&typeof arguments[0] ==="object" ) { var src=arguments[0]||{}; for(key in src) { if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]) continue; else if(src[key]) defaultSettings[key]=src[key]; } } var oTemp = document.createDocumentFragment(); //获取页面最大宽度 var page_width = Math.max(document.body.scrollWidth,document.body.clientWidth); //获取页面最大长度 var page_height = Math.max(document.body.scrollHeight,document.body.clientHeight); //如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔 if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width *defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) { defaultSettings.watermark_cols = parseInt((page_width -defaultSettings.watermark_x +defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔 if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } var x; var y; for (var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //设置水印div倾斜显示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; //mask_div.style.border="solid #eee 1px"; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.fontFamily = defaultSettings.watermark_font; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; oTemp.appendChild(mask_div); }; }; document.body.appendChild(oTemp); }
在jsp页面上直接打开PDF文件
1、在不需要使用插件,直接打开通过链接方式打开<%@ page language="java" import="java.util.*,java.io.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> </head> <% out.clear(); out = pageContext.pushBody(); response.setContentType("application/pdf"); try { String strPdfPath = new String("D://200701010001.PDF"); //判断该路径下的文件是否存在 File file = new File(strPdfPath); if (file.exists()) { DataOutputStream temps = new DataOutputStream(response .getOutputStream()); DataInputStream in = new DataInputStream( new FileInputStream(strPdfPath)); byte[] b = new byte[2048]; while ((in.read(b)) != -1) { temps.write(b); temps.flush(); } in.close(); temps.close(); } else { out.print(strPdfPath + " 文件不存在!"); } } catch (Exception e) { out.println(e.getMessage()); } %> <body> <br> </body> </html>
2、 如果访问者的计算机上没有装acrobat reader,直接用iframe或者直接用链接打开,那就不是打开文档,而是直接下载了,为了防止下载,想像到媒体文件的播放方式,加上一些官方的docs,考虑用用object标签使用pdf插件嵌入ie中
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <TITLE>Checking if Acrobat Reader installed (IE4+)...</TITLE> <SCRIPT for="window" event="onload" <!-- document.all [ document.all.PDFNotKnown ? "IfNoAcrobat" : "IfAcrobat" ] .style.display = "block"; //--></SCRIPT> </HEAD> <BODY> <NOSCRIPT> Cannot determine if you have Acrobat Reader (or the full Acrobat) installed <FONT size="-1">(because JavaScript is unavailable or turned off)</FONT>. </NOSCRIPT> <DIV id="IfNoAcrobat" style="display:none"> <a href="http://get.adobe.com/cn/reader/">你需要先安装Adobe Reader才能正常浏览文件,请点击这里下载Adobe Reader.</a> </DIV> <OBJECT type="application/pdf" width=0 height=0 style="display:none"> <DIV id="PDFNotKnown" style="display:none"> </DIV> </OBJECT> <DIV id=showdiv style="Z-INDEX: 0; LEFT:10px; WIDTH: 990px; POSITION: absolute; TOP: -8px; HEIGHT: 10px"> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="990" height="700" border="0" top="-10" name="pdf"> <param name="toolbar" value="false"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="MXL.pdf"> </object> </DIV> </BODY> </HTML>
3、在网页中直接显示pdf格式的文件方便阅读。但是如果文件较大加载速度会很慢,另外如果客户端没有安装pdf阅读插件的话,也就看不了了,不过还是贴出来了,各取所需吗。(1.pdf要改成自己的pdf文件路径插入到页面文件中)
Html代码 <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> </object> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> </object> 标准浏览器中: Java代码 <object data="1.pdf" type="application/pdf" width="300" height="200"> alt : <a href="1.pdf">test.pdf</a> </object> <object data="1.pdf" type="application/pdf" width="300" height="200"> alt : <a href="1.pdf">test.pdf</a> </object> IE7.0以上版本的浏览器中可用如下方法,低版本的IE会显示两个Object区域 Java代码 <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> <object data="1.pdf" type="application/pdf" width="300" height="200"> alt : <a href="1.pdf">test.pdf</a> </object> </object> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> <object data="1.pdf" type="application/pdf" width="300" height="200"> alt : <a href="1.pdf">test.pdf</a> </object> </object> 低版本浏览器中的处理方法1: Java代码 <!--[if IE]> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> </object> <![endif]--> <!--[if !IE]> <!--> <object data="1.pdf" type="application/pdf" width="800" height="1050"> alt : <a href='http://get.adobe.com/cn/reader'>Adobe Reader.pdf</a> </object> <!--<![endif]--> <!--[if IE]> <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> </object> <![endif]--> <!--[if !IE]> <!--> <object data="1.pdf" type="application/pdf" width="800" height="1050"> alt : <a href='http://get.adobe.com/cn/reader'>Adobe Reader.pdf</a> </object> <!--<![endif]--> 低版本浏览器中的处理方法2:通过CSS控制显示隐藏 Html代码 /* hides the second object from all versions of IE */ * html object.hiddenObjectForIE { display: none; } /* display the second object only for IE5 Mac */ /* IE Mac /*//*/ * html object.hiddenObjectForIE { display: inline; } /**/ /* hides the second object from all versions of IE */ * html object.hiddenObjectForIE { display: none; } /* display the second object only for IE5 Mac */ /* IE Mac /*//*/ * html object.hiddenObjectForIE { display: inline; } /**/ Html代码 <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="800" height="1050" border="0"> <param name="_Version" value="65539"> <param name="_ExtentX" value="20108"> <param name="_ExtentY" value="10866"> <param name="_StockProps" value="0"> <param name="SRC" value="1.pdf"> <object data="1.pdf" type="application/pdf" width="300" height="200" class="hiddenObjectForIE"> alt : <a href="1.pdf">test.pdf</a> </object> </object>
以上文章转自: http://blog.csdn.net/xxyy888/article/details/7259819#comments
相关文章推荐
- wkhtmltopdf 实现在每一个pdf页面的header或者footer加入html碎片,类似水印的功能
- 在jsp页面上直接打开PDF文件
- 【C#功能实现】C# 输出pdf文件流在页面上显示
- itext 5.3.0实现对pdf文件添加(文字和图片)水印
- jsp页面 java 文件下载设置禁止IE直接打开配置问题
- 使用javascript实现html页面直接下载网盘文件
- 在html页面中展示pdf文件,实现在线阅读
- Struts2实现文件上传,直接访问JSP页面出现异常
- 如何在我自己的web 项目的jsp页面中添加链接,直接让别人通过内网在我的电脑上下载文件
- html中实现添加水印的功能
- Java 实现 pdf文件添加 图片水印 itextpdf 5.5.2
- XP中完美实现vista中快捷方式右键添加“打开文件位置”功能
- 在jsp页面上直接打开pdf文档
- JavaScript+Java实现HTML页面转为PDF文件保存的方法
- JSP直接打开PDF文件
- JSP页面实现图片、PDF字节流的显示,Word、Excel、Zip字节流的下载功能的实现
- Adobe Acrobat pro给pdf文件添加水印和加密编辑功能
- 实现文件页面不打开,直接下载
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- 使用firefox直接 打开pdf文件可以破解禁止打印的功能