HTML佈局排版4三部分測試圖片頁面

時間  2020-06-07
標籤 html 佈局 排版 三部分 測試 圖片 頁面 欄目 HTML 简体版
原文   原文鏈接

佈局樣式有前面的三個相關博文介紹：javascript

該頁面由於方便之後本身用，因此JS並無判斷輸入內容爲空或不對的狀況。
頁面自己特色：
1.頁頭的透明圖，方便不更換底層漸變的狀況下，更換圖片
2.瀏覽器寬度改變，中間body的幾個div老是居中
3.頁腳緊跟着主體，內容圖片跟着右側。css

爲了頁面更簡潔，樣式通常會放在css文件裏，該頁面的css文件代碼：html

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直接寫在頁面裏：java

<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>

素材效果圖示：瀏覽器

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程