java高级架构师全套vip教学视频，需要的加我qq1324981084

前面我利用httputil将jsp转化为html，之后转化为pdf，但我发现这样错误率比较高，且成功后有得图片没有完全形成。所以决定放弃这个方法。下面我将会介绍我的第二种方法，我会详细的将我的代码写出来，希望能够帮助到有需要的人。

第一步：

内容：制作jsp页面，我们利用的是拖拽的方法将需要的内容拖拽到一个图片上，之后保存拖拽的代码。

技术：jq拖拽。

代码:

  1. <html >
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>证照管理</title>
  5. <!-- 需要引入的公共的JS -->
  6.     <!-- 基础jquery包 -->
  7.     <script type="text/javascript" src="jQuery1.11.3.min.js"></script>
  8.     <script type="text/javascript" src="jquery-ui.js"></script>
  9.    //在页面加载完之后加载jquery  如果下面加一个信息项，那么这里也要对应加一个
  10.    $().ready(function(e) {
  11.  
  12.        //拖拽复制体
  13.        $("#set1 div").draggable({
  14.             helper:"clone",
  15.             cursor: "move"
  16.        });
  17.         $("#set2 div").draggable({
  18.             helper:"clone",
  19.             cursor: "move"
  20.        });//释放后 对id及相关的属性进行设置
  21.        $('div[id^="r_set"]').droppable({
  22.             drop:function(event,ui){
  23.  
  24.                 var moveId =ui.helper.context.getAttribute('idd');
  25.                 moveIdobj = document.getElementById(moveId);
  26.                 if (moveIdobj){
  27.                     //自定义区域已存在
  28.                 }else{
  29.                     var source = ui.draggable.clone();
  30.  
  31.                     source.attr("id",moveId);
  32.                     $('<img/>', {
  33.                             src: '<%=request.getContextPath()%>/common/image/btn_delete.png',
  34.                             id: 'img',
  35.                             name:'img',
  36.                             click: function() {
  37.                               source.remove();
  38.                             }
  39.                         }).appendTo(source);
  40.                     var top=ui.offset.top + 'px';
  41.                     var left=ui.offset.left + 'px';
  42.                     $(this).append(source);
  43.  
  44.                     $('#'+moveId).css({"position":"absolute" , "top":top ,"left":left,"font-size":'40px',"color":'#3f3631',"font-family":'宋体',"line-height":'40px'});
  45.  
  46.                     $('#'+moveId).draggable({helper:"original"});
  47.                 }
  48.  
  49.             }
  50.  
  51.         });
  52.      });
  53. </script>
  54. <script type="text/javascript">
  55. 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}};
  56. </script>
  57. <!--自写脚本-->
  58. <script type="text/javascript"
  59.     src="script.js"></script>
  60. <style type="text/css">
  61. /* 顶层css */
  62. .wrap {
  63.     width: 360px;
  64.     padding: 15px;
  65.     border: 1px solid #000;
  66.     background-color: #fff;
  67.     position: fixed;
  68.     left: 0;
  69.     top: 0;
  70. }
  71.  
  72. body {
  73.     font: 12px/160% Arial, Helvetica, sans-serif, "新宋体";
  74. }
  75.  
  76. #J_navlist {
  77.     margin-left: 0;
  78. }
  79.  
  80. .none {
  81.     display: none
  82. }
  83.  
  84. .operate {
  85.     position: relative;
  86. }
  87.  
  88. .operate h3 {
  89.     font-family: "Microsoft YaHei", 微软雅黑;
  90.     font-size: 16px;
  91.     background: #f7f7f7;
  92.     height: 30px;
  93.     line-height: 30px;
  94.     padding-left: 12px;
  95. }
  96.  
  97. .operate li {
  98.     width: 100%;
  99.     position: relative;
  100.     list-style: none;
  101.     margin-bottom: 10px;
  102. }
  103.  
  104. .operate li h4 {
  105.     cursor: pointer;
  106.     background: url('<%=request.getContextPath()%>/common/image/bg3.png')
  107.         no-repeat 200px 18px;
  108.     padding-left: 0;
  109.     text-decoration: none;
  110.     font-size: 14px;
  111.     color: #555;
  112.     display: block;
  113.     height: 40px;
  114.     line-height: 40px;
  115.     font-weight: normal;
  116.     border-bottom: 1px dotted #333;
  117.     margin-top: -10px;
  118. }
  119.  
  120. .operate li.selected h4 {
  121.     background-position: 200px -37px;
  122. }
  123.  
  124. .operate li .list-item {
  125.     padding: 5px 0;
  126.     position: relative;
  127.     zoom: 1;
  128.     max-height: 300px;
  129.     overflow-y: auto;
  130.     overflow-x: hidden
  131. }
  132.  
  133. .list-item .ui-widget-content {
  134.     background: #fff
  135.         url('<%=request.getContextPath()%>/common/image/right.png') no-repeat;
  136.     background-position: 10px;
  137.     line-height: 180%;
  138.     color: #333;
  139.     padding-left: 20px;
  140.     position: relative;
  141.     text-decoration: none;
  142.     font-size: 12px;
  143.     margin-bottom: 10px;
  144.     min-width: 250px;
  145. }
  146.  
  147. .ui-draggable {
  148.     background-color: #fff;
  149.     padding: 1px 10px;
  150. }
  151. </style>
  152. <script type="text/javascript"></script>
  153. </head>
  154.  
  155. <body onload="load()">
  156.     <div id="preview" style="display: none; overflow-x:auto;overflow-y:hidden; z-index: 10002;background:#FFFFFF;margin-top: -70px">
  157.     </div>
  158.     <div class="wrap" id="wrap">
  159.         <div class="operate" id="operate" >
  160.             <h3>信息项</h3>
  161.             <ul id="J_navlist">
    //li内是编写拖拽的内容，id不能重名
  162.                 <li>
  163.                     <h4>信息1</h4>
  164.                     <div class="list-item none" id="set1">
  165.                         <div id="draggable1" idd="comCode" class="ui-widget-content"
  166.                             onclick="a(this)">1</div> 
                            <div id="draggable1" idd="comCode" class="ui-widget-content"
  167.                             onclick="a(this)">1</div>
  168.                 </li> 
                    <li>
  169.                     <h4>信息1</h4>
  170.                     <div class="list-item none" id="set1">
  171.                         <div id="draggable1" idd="comCode" class="ui-widget-content"
  172.                             onclick="a(this)">1</div> 
                            <div id="draggable1" idd="comCode" class="ui-widget-content"
  173.                             onclick="a(this)">1</div>
  174.                 </li>
  175.             </ul>
  176.         </div>
  177.     </div>
    //这里是div拖拽区域，用于把拖拽的内容存储起来
    //page-break-inside: avoid; 是为了多图片pdf分页
  178.          <div id="r_set" style="margin: 0; padding: 0;">
  179.                  <img src="/path/mould_image/***.png" style="page-break-inside: avoid;"/>
  180.         </div>
  181. </body>
  182. </html>

第二步：

　　　　内容:制作标准的html页面，在页面中设置一个特殊的字符串，在程序的后台将特殊的字符串替换成保存的jsp代码，这样就得到标准的html页面

　　　  技术:将html页面获得并转化成字符串

代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Insert title here</title>
  7. <style type="text/css">
  8. .wrap {
  9.     width: 360px;
  10.     padding: 15px;
  11.     border: 1px solid #000;
  12.     background-color: #fff;
  13.     position: fixed;
  14.     left: 0;
  15.     top: 0;
  16. }
  17.  
  18. body {
  19.     font: 12px/160% Arial, Helvetica, sans-serif, "新宋体";
  20. }
  21.  
  22. #J_navlist {
  23.     margin-left: 0;
  24. }
  25.  
  26. .none {
  27.     display: none
  28. }
  29.  
  30. .operate {
  31.  
  32. }
  33.  
  34. .operate h3 {
  35.     font-family: "Microsoft YaHei", 微软雅黑;
  36.     font-size: 16px;
  37.     background: #f7f7f7;
  38.     height: 30px;
  39.     line-height: 30px;
  40.     padding-left: 12px;
  41. }
  42.  
  43. .operate li {
  44.     width: 100%;
  45.     position: relative;
  46.     list-style: none;
  47.     margin-bottom: 10px;
  48. }
  49.  
  50. .operate li h4 {
  51.     cursor: pointer;
  52.     background: url('<%=request.getContextPath()%>/common/image/bg3.png')
  53.         no-repeat 200px 18px;
  54.     padding-left: 0;
  55.     text-decoration: none;
  56.     font-size: 14px;
  57.     color: #555;
  58.     display: block;
  59.     height: 40px;
  60.     line-height: 40px;
  61.     font-weight: normal;
  62.     border-bottom: 1px dotted #333;
  63.     margin-top: -10px;
  64. }
  65.  
  66. .operate li.selected h4 {
  67.     background-position: 200px -37px;
  68. }
  69.  
  70. .operate li .list-item {
  71.     padding: 5px 0;
  72.     position: relative;
  73.     zoom: 1;
  74. }
  75.  
  76. .list-item .ui-widget-content {
  77.     background: #fff
  78.         url('<%=request.getContextPath()%>/common/image/right.png') no-repeat;
  79.     background-position: 10px;
  80.     line-height: 180%;
  81.     color: #333;
  82.     padding-left: 20px;
  83.     position: relative;
  84.     text-decoration: none;
  85.     font-size: 12px;
  86.     margin-bottom: 10px;
  87.     min-width: 250px;
  88. }
  89.  
  90. .ui-draggable {
  91.     padding: 3px 10px;
  92. }
  93. </style>
  94. </head>
  95. <body>
  96.     <div id="r_set" style="margin: 0; padding: 0;">###jspContent###</div>
  97. </body>
  98. </html>
  1.         String Modelpath = htmlpath + "/el/elManage/temp/temp.html"; //模板文件地址
  2.  
  3.         FileInputStream fileinputstream = new FileInputStream(Modelpath);//读取模块文件
  4.         int lenght = fileinputstream.available();
  5.         byte bytes[] = new byte[lenght];
  6.         fileinputstream.read(bytes);
  7.         fileinputstream.close();
  8.         String templateContent = new String(bytes);
  9.         //jspContent 存储得到数据库中的内容
  10.         templateContent=templateContent.replaceAll("###jspContent###",jspContent); //替换掉模块中相应的地方 
  11.  
  12.         //形成一个唯一的文件名   有可能大家没有UUID这个方法，大家随表取一个名字就可以。
  13.         String uid = UUID.getUID();
  14.         String fileame = uid +".html"; //生成的html文件保存路径
  15.         FileOutputStream fileoutputstream = new FileOutputStream(path + fileame);//建立文件输出流
  16.         byte tag_bytes[] = templateContent.getBytes("UTF-8");
  17.         fileoutputstream.write(tag_bytes); 
            fileoutputstream.close();

这样我们就将jsp页面转化为html页面了，但大家一定要注意形成的html页面的位置和图片的位置，看是否能够显示图片，我相信大家知道我说的是什么意思。

我们将在第二篇文章讲解怎么将html页面转化为pdf或者image。希望这篇文章能够帮助大家，如有不明白的请留言。下面我提供一些架包和一些资料。

链接：http://pan.baidu.com/s/1nuAbRkP 密码：k0xj

将jsp页面转化为图片或pdf升级版（一）（qq:1324981084）的更多相关文章

  1. 将jsp页面转化为图片或pdf升级版（二）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 上面我们已经将jsp页面转化成html页面了,那么接下来我们的目标是利用这个html页面形成pdf或图片格式.这里我用到的是w ...

  2. 将jsp页面转化为图片或pdf（一）

    在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...

  3. 将jsp页面转化为图片或pdf（一）（qq:1324981084）

    java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...

  4. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  5. 关于springmvc 只能在index.jsp页面显示图片的处理办法jsp页面无法显示图片

    首先,已经配置好了mvc对静态资源的处理 只有index,jsp可以显示图片 其他页面同样的代码则不显示 后来折腾了半天,发现 index是static的父目录的级别文件 可以向下访问 但是其他的js ...

  6. hml页面转化成图片

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...

  7. Vue使用html2canvas将页面转化为图片

    需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件 先引入插件 npm install --save html2canvas 之后在你所需要使用的页面引入 import html2 ...

  8. 把html页面转化成图片——html2canvas

    test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...

  9. JSP 页面中用绝对路径显示图片

    首先,图片和工程不在一个盘符下.图片也不能放到工程下.  在JSP 文件中 <img src="E:/图片/1.jpg"/>  这样是引不到图片的.因为,JSP页面在引 ...

随机推荐

  1. JS绘图

    https://www.highcharts.com.cn/demo/highcharts/ 百度的Echarts https://www.echartsjs.com/zh/index.html

  2. Java单体应用 - Markdown - 03.高级技巧

    原文地址:http://www.work100.net/training/monolithic-markdown-advance.html 更多教程:光束云 - 免费课程 高级技巧 序号 文内章节 视 ...

  3. OAuth2.0的那点荒唐小秘密 -几个简单概念和原理

    OAuth2.0这个名词你是否在项目中时常听到呢?是否觉得好像懂,又好像不太懂呢? 最近一直想写篇关于OAuth2.0的东西,记录下我的学习与感悟,然各种理由的拖延,直到今日才静下心来写下这篇博客.当 ...

  4. List自定义排序 (例子省份排序)

    //待排序集合 List<String> list=new ArrayList<String>(); list.add("辽宁"); list.add(&q ...

  5. Error connecting to the Service Control Manager: 拒绝访问 Mongodb问题-解决

    原文地址:https://blog.csdn.net/carrot5032/article/details/74742888 发现在mongodb.log里出现  2017-07-07T17:01:5 ...

  6. 最强PostMan使用教程

    最近需要测试产品中的REST API,无意中发现了PostMan这个chrome插件,把玩了一下,发现postman秉承了一贯以来google工具强大,易用的特质.独乐乐不如众乐乐,特此共享出来给大伙 ...

  7. 学习 lind api 十月 第一弹

    step one 我们来看一下代码的结构

  8. Frameworks.Entity.Core 7

    1描述:实体基类,与业务和架构无关名称:EntityBase属性:public abstract 2描述:/ MongoDB的一些扩展方法名称:MongoExtensions修饰: public st ...

  9. python 3 创建虚拟环境（Win10）

    python 3 创建虚拟环境(Win10) ①为什么要用虚拟环境? 为了解决一个环境多个项目的版本冲突问题 ②如何创建虚拟环境? 用窗口键+R来打开win10的运行窗口,然后在运行输入框输入cmd, ...

  10. php--->把json传来的stdClass Object类型转array

    php把json传来的stdClass Object类型转array 1.Php中stdClass.object.array的概念 stdClass是PHP的一个基类,即一个空白的类,所有的类几乎都继 ...