布局样式有前面的三个相关博文介绍:

该页面因为方便以后自己用,所以JS并没有判断输入内容为空或不对的情况。
页面本身特点:
1.页头的透明图,方便不更换底层渐变的情况下,更换图片
2.浏览器宽度改变,中间body的几个div总是居中
3.页脚紧跟着主体,内容图片跟着右侧。

为了页面更简洁,样式一般会放在css文件里,该页面的css文件代码:

body{margin:0px;font-size:12px;}
#body{width:100%;}
#bodyleft{background-image:url(../images/t1.png);width:790px;height:25px;margin:auto;}
#bodymiddle{background-image:url(../images/t2.png);width:790px;text-align:center;margin:auto;}
#bodyright{background-image:url(../images/t3.png);width:790px;height:25px;margin:auto;}
.btn1{background-color: #5ff6ed;font-size: 12px;}
.next{color:blue;}
#header{background-image:url(../images/topbg.png);width:100%;height:100px;}
#head1{background-image:url(../images/lodoptest.png);width:400px;height:100px;}
#footer{width:790px;height:100px;margin:auto;text-align:right;}

页面代码,JS直接写在页面里:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
<link href="css/stylecss1.css" type='text/css' rel="stylesheet">
</head>
<body>
<div id="header">
<div id="head1"></div>
</div> <div id="body">
<div id="bodyleft"></div>
<div id="bodymiddle">测试图片请放在testimage文件夹下<br>
输入需要测试的图片名称:<input type="text" id="T1" size=40>例如:1.jpg
<input type="button" class="btn1" value="点击预览测试" onclick="prndefpageimage()" ><br>
<p class="next">用lodop语句缩放图片的测试,请填下面:</p>
<input type="radio" id="r1" name="rs" value="0" checked="checked">可变形缩放
<input type="radio" id="r2" name="rs" value="1">不可变形缩放<br>
输入需要缩放的宽度<input type="text" id="T2">输入需要缩放的高度<input type="text" id="T3">
<input type="button" class="btn1" value="点击预览测试缩放图片" onclick="prndefpageimagesf()">
<p class="next">用lodop语句缩放图片且在一定纸张里的测试,请填下面:</p>
纵向纸张,输入纸张宽度<input type="text" id="T4">输入纸张宽度<input type="text" id="T5">
<input type="button" class="btn1" value="点击预览测试缩放图片在一定纸张中" onclick="prndefpageimagesf()">
<div id="bodyright"></div>
</div>
</div>
<div id="body">
<div id="bodyleft"></div>
<div id="bodymiddle">直接测试网络地址图片<br>
输入需要测试的图片地址:<input type="text" id="TW" size=40>
<input type="button" class="btn1" value="点击预览测试" onclick="prnnet()" ><br>
<div id="bodyright"></div>
</div>
</div> <div id="body">
<div id="bodyleft"></div>
<div id="bodymiddle">(1)查看lodop内部解析的html信息,见http://www.c-lodop.com/faq/pp8.html<br>
查看一下传入的图片路径是否正确,尽量用绝对路径地址,换个图片试试。<br>
(2)显示空白或者图片缺失等问题,加延迟试试:<br>
LODOP.SET_PRINT_STYLEA(0,"HtmWaitMilSecs",1000)//设置上一项延迟超文本下载1000毫秒<br>
(3)权限问题,图片显示叉号 说明服务端拒绝了 可能证书 session等问题,导致没有直接访问该图片的权限,有些需要验证之后才能访问图片。由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(cookies)<br>
(4)清空ie缓存 重置ie 后在ie中查看下。IE中的URL最大长度限制为2048字节。超过这个长度会不支持。<br>
(5) 查看服务器端错误日志排查下 。<br>
(6)做个简单的例子验证下,排除其他因素的干扰。Base64输出图片参考样例38。<br>
直接把图片地址放到ie浏览器里是试验下。能否直接在浏览器里访问到。<br><br>
图片批量打印,src 方式输出,需要通过浏览器引擎解析,存在不释放缓存的现象,可尝试base64码输出,参考样例38http://www.c-lodop.com/demolist/PrintSample38.html
base64位码输出直接通过本地lodop程序解析,无需经过浏览器引擎解析<br>
</div>
<div id="bodyright"></div>
</div>
</div> <div id="footer"><img src="./images/cnblog.png"></div>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prndefpageimage() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_IMAGE(0,0,"100%","100%","<img border='0' src='testimages/"+document.getElementById("T1").value+"'/>");
//LODOP.PRINT_DESIGN();
LODOP.PREVIEW();
};
function prndefpageimagesf() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_IMAGE(0,0,document.getElementById("T2").value,document.getElementById("T3").value,"<img border='0' src='testimages/"+document.getElementById("T1").value+"'/>");
if(document.getElementById("r1").checked==true)
LODOP.SET_PRINT_STYLEA(0,"Stretch",1);//(可变形)扩展缩放模式
else if(document.getElementById("r2").checked==true)
LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//按原图比例(不变形)缩放模式
//LODOP.PRINT_DESIGN();
LODOP.PREVIEW();
};
function prndiypage() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.SET_PRINT_PAGESIZE(1, document.getElementById("T4").value, document.getElementById("T5").value,"");
LODOP.ADD_PRINT_IMAGE(0,0,document.getElementById("T2").value,document.getElementById("T3").value,"<img border='0' src='testimages/"+document.getElementById("T1").value+"'/>");
if(document.getElementById("r1").checked==true)
LODOP.SET_PRINT_STYLEA(0,"Stretch",1);//(可变形)扩展缩放模式
else if(document.getElementById("r2").checked==true)
LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//按原图比例(不变形)缩放模式
//LODOP.PRINT_DESIGN();
LODOP.PREVIEW();
};
function prnnet() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_IMAGE(0,0,"100%","100%","<img border='0' src='"+document.getElementById("TW").value+"'/>");
//LODOP.PRINT_DESIGN();
LODOP.PREVIEW();
};
</script>
</body>

素材效果图示:

HTML布局排版4三部分测试图片页面的更多相关文章

  1. HTML布局排版之制作个人网站的文章列表

    文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...

  2. DIV+CSS 网页布局之:三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  3. png、jpg、gif三种图片格式的区别

    png.jpg.gif三种图片格式的区别   2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...

  4. HTML用table布局排版 padding清零

    之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...

  5. HTML布局排版手机上浏览的网页

    前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...

  6. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  7. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  8. css布局笔记(三)圣杯布局,双飞翼布局

    圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下 <!-- 圣杯布局 --> <!DOCTYPE html> &l ...

  9. QT5:第二章 布局排版控件

    一.简介 在QT组件面板中有Layouts和Spacers两个组件面板 注意:布局排版控件不显示 1.Layouts(布局) Vertical Layout:垂直方向布局,组件自动在垂直方向上分布 H ...

随机推荐

  1. 初始SpringBoot

    导入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http:/ ...

  2. Acwing P288 休息时间 题解

    Analysis 首先假设一天的第N小时与后一天的第一个小时不相连, 这种情况下DP转移比较好想 dp[i][j][0/1]dp[i][j][0/1]表示 考虑一天的前i个小时,已经休息了j小时,且第 ...

  3. asp.net之大文件断点续传

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  4. 描述yeild作用

    保存当前运行状态(断点),然后暂停执行,即将函数挂起 将yeild关键字后面表达式的值作为返回值返回,此时可以理解为起到了return的作用,当使用next().send()函数让函数从断点处继续执行 ...

  5. CentOS 6.5开放端口方法

    lsof -i tcp:80   列出所有端口   netstat -ntlp   1.开启端口(以80端口为例)         方法一:            /sbin/iptables -I ...

  6. Java 中List集合中自定义排序

    /* 集合框架的工具类. Collections:集合框架的工具类.里面定义的都是静态方法. Collections和Collection有什么区别? Collection是集合框架中的一个顶层接口, ...

  7. fluent-动网格-动态层

    模型算例来源:http://blog.sina.com.cn/s/blog_599d8faa0100w4uj.html ​原视频下载地址:http://yunpan.cn/cujM2FxLuGdLK ...

  8. UDF-C_UDMI【转载】

    UDF定义变量的输出 使用宏: C_UDMI( c, thread, index)       自变量类型:cell_t c       Thread *thread       int index ...

  9. com.ibm.db2.jcc.am.SqlSyntaxErrorException: DB2 SQL Error: SQLCODE=-418, SQLSTATE=42610, SQLERRMC=null

    写了一条sql,在db2数据库中可以执行,但是转换成mybatis的mapper文件后,在执行排序操作时报该错误. 我排序是这样写的 <if test="orderStr != nul ...

  10. ubuntu之路——day10.5 可避免偏差

    可避免偏差: 总结一下就是当贝叶斯最优误差接近于训练误差的时候,比如下面的例子B,我们不会说我们的训练误差是8%,我们会说我可避免偏差是0.5%.