将jsp页面转化为图片或pdf升级版（一）（qq:1197852132）
java高级架构师全套vip教学视频，需要的加我qq1197852132
前面我利用httputil将jsp转化为html，之后转化为pdf，但我发现这样错误率比较高，且成功后有得图片没有完全形成。所以决定放弃这个方法。下面我将会介绍我的第二种方法，我会详细的将我的代码写出来，希望能够帮助到有需要的人。
第一步：
内容：制作jsp页面，我们利用的是拖拽的方法将需要的内容拖拽到一个图片上，之后保存拖拽的代码。
技术：jq拖拽。
代码:
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>证照管理</title> <!-- 需要引入的公共的JS --> <!-- 基础jquery包 --> <script type="text/javascript" src="jQuery1.11.3.min.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> //在页面加载完之后加载jquery 如果下面加一个信息项，那么这里也要对应加一个 $().ready(function(e) { //拖拽复制体 $("#set1 div").draggable({ helper:"clone", cursor: "move" }); $("#set2 div").draggable({ helper:"clone", cursor: "move" });//释放后 对id及相关的属性进行设置 $('div[id^="r_set"]').droppable({ drop:function(event,ui){ var moveId =ui.helper.context.getAttribute('idd'); moveIdobj = document.getElementById(moveId); if (moveIdobj){ //自定义区域已存在 }else{ var source = ui.draggable.clone(); source.attr("id",moveId); $('<img/>', { src: '<%=request.getContextPath()%>/common/image/btn_delete.png', id: 'img', name:'img', click: function() { source.remove(); } }).appendTo(source); var top=ui.offset.top + 'px'; var left=ui.offset.left + 'px'; $(this).append(source); $('#'+moveId).css({"position":"absolute" , "top":top ,"left":left,"font-size":'40px',"color":'#3f3631',"font-family":'宋体',"line-height":'40px'}); $('#'+moveId).draggable({helper:"original"}); } } }); }); </script> <script type="text/javascript"> if(typeof addEvent!='function'){var addEvent=function(o,t,f,l){var d='addEventListener',n='on'+t,rO=o,rT=t,rF=f,rL=l;if(o[d]&&!l)return o[d](t,f,false);if(!o._evts)o._evts={};if(!o._evts[t]){o._evts[t]=o[n]?{b:o[n]}:{};o[n]=new Function('e','var r=true,o=this,a=o._evts["'+t+'"],i;for(i in a){o._f=a[i];r=o._f(e||window.event)!=false&&r;o._f=null}return r');if(t!='unload')addEvent(window,'unload',function(){removeEvent(rO,rT,rF,rL)})}if(!f._i)f._i=addEvent._i++;o._evts[t][f._i]=f};addEvent._i=1;var removeEvent=function(o,t,f,l){var d='removeEventListener';if(o[d]&&!l)return o[d](t,f,false);if(o._evts&&o._evts[t]&&f._i)delete o._evts[t][f._i]}}function cancelEvent(e,c){e.returnValue=false;if(e.preventDefault)e.preventDefault();if(c){e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation()}};function DragResize(myName,config){var props={myName:myName,enabled:true,handles:['tl','tm','tr','ml','mr','bl','bm','br'],isElement:null,isHandle:null,element:null,handle:null,minWidth:10,minHeight:10,minLeft:0,maxLeft:9999,minTop:0,maxTop:9999,zIndex:1,mouseX:0,mouseY:0,lastMouseX:0,lastMouseY:0,mOffX:0,mOffY:0,elmX:0,elmY:0,elmW:0,elmH:0,allowBlur:true,ondragfocus:null,ondragstart:null,ondragmove:null,ondragend:null,ondragblur:null};for(var p in props)this[p]=(typeof config[p]=='undefined')?props[p]:config[p]};DragResize.prototype.apply=function(node){var obj=this;addEvent(node,'mousedown',function(e){obj.mouseDown(e)});addEvent(node,'mousemove',function(e){obj.mouseMove(e)});addEvent(node,'mouseup',function(e){obj.mouseUp(e)})};DragResize.prototype.select=function(newElement){with(this){if(!document.getElementById||!enabled)return;if(newElement&&(newElement!=element)&&enabled){element=newElement;element.style.zIndex=++zIndex;if(this.resizeHandleSet)this.resizeHandleSet(element,true);elmX=parseInt(element.style.left);elmY=parseInt(element.style.top);elmW=element.offsetWidth;elmH=element.offsetHeight;if(ondragfocus)this.ondragfocus()}}};DragResize.prototype.deselect=function(delHandles){with(this){if(!document.getElementById||!enabled)return;if(delHandles){if(ondragblur)this.ondragblur();if(this.resizeHandleSet)this.resizeHandleSet(element,false);element=null}handle=null;mOffX=0;mOffY=0}};DragResize.prototype.mouseDown=function(e){with(this){if(!document.getElementById||!enabled)return true;var elm=e.target||e.srcElement,newElement=null,newHandle=null,hRE=new RegExp(myName+'-([trmbl]{2})','');while(elm){if(elm.className){if(!newHandle&&(hRE.test(elm.className)||isHandle(elm)))newHandle=elm;if(isElement(elm)){newElement=elm;break}}elm=elm.parentNode}if(element&&(element!=newElement)&&allowBlur)deselect(true);if(newElement&&(!element||(newElement==element))){if(newHandle)cancelEvent(e);select(newElement,newHandle);handle=newHandle;if(handle&&ondragstart)this.ondragstart(hRE.test(handle.className))}}};DragResize.prototype.mouseMove=function(e){with(this){if(!document.getElementById||!enabled)return true;mouseX=e.pageX||e.clientX+document.documentElement.scrollLeft;mouseY=e.pageY||e.clientY+document.documentElement.scrollTop;var diffX=mouseX-lastMouseX+mOffX;var diffY=mouseY-lastMouseY+mOffY;mOffX=mOffY=0;lastMouseX=mouseX;lastMouseY=mouseY;if(!handle)return true;var isResize=false;if(this.resizeHandleDrag&&this.resizeHandleDrag(diffX,diffY)){isResize=true}else{var dX=diffX,dY=diffY;if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmX+=diffX;elmY+=diffY}with(element.style){left=elmX+'px';width=elmW+'px';top=elmY+'px';height=elmH+'px'}if(window.opera&&document.documentElement){var oDF=document.getElementById('op-drag-fix');if(!oDF){var oDF=document.createElement('input');oDF.id='op-drag-fix';oDF.style.display='none';document.body.appendChild(oDF)}oDF.focus()}if(ondragmove)this.ondragmove(isResize);cancelEvent(e)}};DragResize.prototype.mouseUp=function(e){with(this){if(!document.getElementById||!enabled)return;var hRE=new RegExp(myName+'-([trmbl]{2})','');if(handle&&ondragend)this.ondragend(hRE.test(handle.className));deselect(false)}};DragResize.prototype.resizeHandleSet=function(elm,show){with(this){if(!elm._handle_tr){for(var h=0;h<handles.length;h++){var hDiv=document.createElement('div');hDiv.className=myName+' '+myName+'-'+handles[h];elm['_handle_'+handles[h]]=elm.appendChild(hDiv)}}for(var h=0;h<handles.length;h++){elm['_handle_'+handles[h]].style.visibility=show?'inherit':'hidden'}}};DragResize.prototype.resizeHandleDrag=function(diffX,diffY){with(this){var hClass=handle&&handle.className&&handle.className.match(new RegExp(myName+'-([tmblr]{2})'))?RegExp.$1:'';var dY=diffY,dX=diffX,processed=false;if(hClass.indexOf('t')>=0){rs=1;if(elmH-dY<minHeight)mOffY=(dY-(diffY=elmH-minHeight));else if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));elmY+=diffY;elmH-=diffY;processed=true}if(hClass.indexOf('b')>=0){rs=1;if(elmH+dY<minHeight)mOffY=(dY-(diffY=minHeight-elmH));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmH+=diffY;processed=true}if(hClass.indexOf('l')>=0){rs=1;if(elmW-dX<minWidth)mOffX=(dX-(diffX=elmW-minWidth));else if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));elmX+=diffX;elmW-=diffX;processed=true}if(hClass.indexOf('r')>=0){rs=1;if(elmW+dX<minWidth)mOffX=(dX-(diffX=minWidth-elmW));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));elmW+=diffX;processed=true}return processed}}; </script> <!--自写脚本--> <script type="text/javascript" src="script.js"></script> <style type="text/css"> /* 顶层css */ .wrap { width: 360px; padding: 15px; border: 1px solid #000; background-color: #fff; position: fixed; left: 0; top: 0; } body { font: 12px/160% Arial, Helvetica, sans-serif, "新宋体"; } #J_navlist { margin-left: 0; } .none { display: none } .operate { position: relative; } .operate h3 { font-family: "Microsoft YaHei", 微软雅黑; font-size: 16px; background: #f7f7f7; height: 30px; line-height: 30px; padding-left: 12px; } .operate li { width: 100%; position: relative; list-style: none; margin-bottom: 10px; } .operate li h4 { cursor: pointer; background: url('<%=request.getContextPath()%>/common/image/bg3.png') no-repeat 200px 18px; padding-left: 0; text-decoration: none; font-size: 14px; color: #555; display: block; height: 40px; line-height: 40px; font-weight: normal; border-bottom: 1px dotted #333; margin-top: -10px; } .operate li.selected h4 { background-position: 200px -37px; } .operate li .list-item { padding: 5px 0; position: relative; zoom: 1; max-height: 300px; overflow-y: auto; overflow-x: hidden } .list-item .ui-widget-content { background: #fff url('<%=request.getContextPath()%>/common/image/right.png') no-repeat; background-position: 10px; line-height: 180%; color: #333; padding-left: 20px; position: relative; text-decoration: none; font-size: 12px; margin-bottom: 10px; min-width: 250px; } .ui-draggable { background-color: #fff; padding: 1px 10px; } </style> <script type="text/javascript"></script> </head> <body onload="load()"> <div id="preview" style="display: none; overflow-x:auto;overflow-y:hidden; z-index: 10002;background:#FFFFFF;margin-top: -70px"> </div> <div class="wrap" id="wrap"> <div class="operate" id="operate" > <h3>信息项</h3> <ul id="J_navlist">
//li内是编写拖拽的内容，id不能重名 <li> <h4>信息1</h4> <div class="list-item none" id="set1"> <div id="draggable1" idd="comCode" class="ui-widget-content" onclick="a(this)">1</div>
<div id="draggable1" idd="comCode" class="ui-widget-content" onclick="a(this)">1</div> </li>
<li> <h4>信息1</h4> <div class="list-item none" id="set1"> <div id="draggable1" idd="comCode" class="ui-widget-content" onclick="a(this)">1</div>
<div id="draggable1" idd="comCode" class="ui-widget-content" onclick="a(this)">1</div> </li> </ul> </div> </div>
//这里是div拖拽区域，用于把拖拽的内容存储起来
//page-break-inside: avoid; 是为了多图片pdf分页 <div id="r_set" style="margin: 0; padding: 0;"> <img src="/path/mould_image/***.png" style="page-break-inside: avoid;"/> </div> </body> </html>
第二步：
内容:制作标准的html页面，在页面中设置一个特殊的字符串，在程序的后台将特殊的字符串替换成保存的jsp代码，这样就得到标准的html页面
技术:将html页面获得并转化成字符串
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Insert title here</title> <style type="text/css"> .wrap { width: 360px; padding: 15px; border: 1px solid #000; background-color: #fff; position: fixed; left: 0; top: 0; } body { font: 12px/160% Arial, Helvetica, sans-serif, "新宋体"; } #J_navlist { margin-left: 0; } .none { display: none } .operate { } .operate h3 { font-family: "Microsoft YaHei", 微软雅黑; font-size: 16px; background: #f7f7f7; height: 30px; line-height: 30px; padding-left: 12px; } .operate li { width: 100%; position: relative; list-style: none; margin-bottom: 10px; } .operate li h4 { cursor: pointer; background: url('<%=request.getContextPath()%>/common/image/bg3.png') no-repeat 200px 18px; padding-left: 0; text-decoration: none; font-size: 14px; color: #555; display: block; height: 40px; line-height: 40px; font-weight: normal; border-bottom: 1px dotted #333; margin-top: -10px; } .operate li.selected h4 { background-position: 200px -37px; } .operate li .list-item { padding: 5px 0; position: relative; zoom: 1; } .list-item .ui-widget-content { background: #fff url('<%=request.getContextPath()%>/common/image/right.png') no-repeat; background-position: 10px; line-height: 180%; color: #333; padding-left: 20px; position: relative; text-decoration: none; font-size: 12px; margin-bottom: 10px; min-width: 250px; } .ui-draggable { padding: 3px 10px; } </style> </head> <body> <div id="r_set" style="margin: 0; padding: 0;">###jspContent###</div> </body> </html>
String Modelpath = htmlpath + "/el/elManage/temp/temp.html"; //模板文件地址 FileInputStream fileinputstream = new FileInputStream(Modelpath);//读取模块文件 int lenght = fileinputstream.available(); byte bytes[] = new byte[lenght]; fileinputstream.read(bytes); fileinputstream.close(); String templateContent = new String(bytes); //jspContent 存储得到数据库中的内容 templateContent=templateContent.replaceAll("###jspContent###",jspContent); //替换掉模块中相应的地方 //形成一个唯一的文件名 有可能大家没有UUID这个方法，大家随表取一个名字就可以。 String uid = UUID.getUID(); String fileame = uid +".html"; //生成的html文件保存路径 FileOutputStream fileoutputstream = new FileOutputStream(path + fileame);//建立文件输出流 byte tag_bytes[] = templateContent.getBytes("UTF-8"); fileoutputstream.write(tag_bytes);
fileoutputstream.close();
这样我们就将jsp页面转化为html页面了，但大家一定要注意形成的html页面的位置和图片的位置，看是否能够显示图片，我相信大家知道我说的是什么意思。
我们将在第二篇文章讲解怎么将html页面转化为pdf或者image。希望这篇文章能够帮助大家，如有不明白的请留言。下面我提供一些架包和一些资料。
链接：http://pan.baidu.com/s/1nuAbRkP 密码：k0xj
