HTML布局排版4三部分测试图片页面

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

该页面因为方便以后自己用，所以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三部分测试图片页面的更多相关文章

HTML布局排版之制作个人网站的文章列表
文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...
DIV+CSS 网页布局之：三列布局
1.宽度自适应三列布局三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...
png、jpg、gif三种图片格式的区别
png.jpg.gif三种图片格式的区别 2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...
HTML用table布局排版 padding清零
之前博文:HTML布局排版2如何设置div总是相对于页面居中中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...
HTML布局排版手机上浏览的网页
前面做个几个简单的测试html布局排版的页面,都是在浏览器上查看的,C-LODOP可通过集中打印和广域网AO打印方式,让手机等也可以打印预览和打印. 集中打印的大体方法是通过一台windows电脑作为 ...
Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
css布局笔记（三）圣杯布局，双飞翼布局
圣杯布局和双飞翼布局都是三列布局,两边定宽,中间自适应布局,中间栏要在放在文档流前面以优先渲染. 圣杯布局如下  <!DOCTYPE html> &l ...
QT5:第二章布局排版控件
一.简介在QT组件面板中有Layouts和Spacers两个组件面板注意:布局排版控件不显示 1.Layouts(布局) Vertical Layout:垂直方向布局,组件自动在垂直方向上分布 H ...

随机推荐

项目兼容ie8技术要点
好久没有写博客了,因为最近公司项目要调ie8兼容,一直在忙这事,终于竣工了,跟大家分享下这老掉牙的浏览器是如何搞定的...本人新手一枚,欢迎大家指教项目是使用的jeecg框架,后台使用的java,前 ...
SP1825 【FTOUR2 - Free tour II】
# $SP1825$ 看到没有人用老师的办法,于是自己写一下思路思路第一步:排除旧方法首先这道题和$4178$不一样,因为那道题是计数,而这道题是求最值,最值有个坏处,就是对于来自相同子树 ...
ElementUI入门和NodeJS环境搭建
1. ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它 ...
4：ELK分析tomcat日志
五.ELK分析tomcat日志 1.配置FIlebeat搜集tomcat日志 2.配置Logstash从filebeat输入tomcat日志 3.查看索引 4.创建索引
Kafka kSQL sql查询
背景 kafka早期作为一个日志消息系统,很受运维欢迎的,配合ELK玩起来很happy,在kafka慢慢的转向流式平台的过程中,开发也慢慢介入了,一些业务系统也开始和kafka对接起来了,也还是很受大 ...
VS - Microsoft.Practices.Unity
PM> Install-Package Unity Web.config <configSections> <section name="unity" t ...
IIS相关的常见报错
1.错误消息 401.3: 无权限您无权使用您提供的凭据查看此目录或页(由于访问控制列表而导致访问被拒绝).请让 Web 服务器的管理员授予您访问“E:\IIS_Deploy\WebServices ...
php 简单使用redis 队列示例
public function redisAction(){ $redis = new Redis(); $redis->connect('127.0.0.1', 6379); echo &qu ...
ERROR 1067 (42000): Invalid default value for 'time'
修改sql_mode,去掉NO_ZERO_IN_DATE,NO_ZERO_DATE这两个参数查看 root@:: [hmda]> show variables like 'sql_mode'; ...
如何在Fluent使用非牛顿流体【转载】
转载自:http://blog.sciencenet.cn/blog-267817-747504.html 1.非牛顿流体:剪应力与剪切应变率之间满足线性关系的流体称为牛顿流体,而把不满足线性关系的流 ...

HTML布局排版4三部分测试图片页面

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

随机推荐

热门专题