Web列印的解決方案之證件套打
由於以前未接觸過套打,一直覺得套打是一個比較神祕和麻煩的事情,因為印表機的位置總是需要調整的,你總不能硬編碼吧?但是如果位置可調,有需要直觀一些來處理,那就比較麻煩了。
在前面介紹過《》的一片文章中提到過那個列印控制元件Lodop,做起套打來感覺還是挺方便的,至少位置調整介面不需要自己弄,位置嘛,也提供了自動儲存的功能,不需要理會。
一般的套打,包含了幾部分操作:列印預覽、列印維護、列印設計。
列印預覽和列印維護是面向終端使用者的,列印維護是指內容不能修改刪除、但位置可以調整,給不同的印表機不同的尺寸列印提供調整位置的可能性。
列印設計是面向開發人員的,開始需要通過這個功能來設計好套打的介面,就是根據套打證件的背景圖片,大致擺放好各個內容的位置。
大致的實現程式碼如下所示:
<script language="javascript">var LODOP=document.getElementById("LODOP");//這行語句是為了符合DTD規範 CheckLodop();</script><script language="javascript" type="text/javascript">function Preview2() {
CreateDataBill();
LODOP.PREVIEW();
};
CreateDataBill();
LODOP.PRINT_SETUP();
};
function Design2() {
CreateDataBill();
LODOP.PRINT_DESIGN();
};
function RealPrint() {
CreateDataBill();
if (LODOP.PRINTA())
alert(
else
alert("放棄列印!");
};
function CreateDataBill() {
LODOP.SET_PRINT_PAPER(10,10,762,533,"列印控制元件功能演示_Lodop功能_移動公司發票套打");
LODOP.ADD_PRINT_TEXT(126,150,100,20,"郭德剛");
LODOP.SET_PRINT_STYLEA(1,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(151,150,100,20,"13954885177");
LODOP.SET_PRINT_STYLEA(2,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(125,584,99,20,"發票列印(第1次)");
LODOP.SET_PRINT_STYLEA(3,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,140,198,20,"陸百柒拾捌元叄角零分");
LODOP.SET_PRINT_STYLEA(4,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(465,599,70,20,"678.30");
LODOP.SET_PRINT_STYLEA(5,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,408,59,20,"H112063");
LODOP.SET_PRINT_STYLEA(6,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,58,100,20,"國內漫遊通話");
LODOP.SET_PRINT_STYLEA(7,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(191,217,100,20,"584.00");
LODOP.SET_PRINT_STYLEA(8,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,58,100,20,"增值業務費");
LODOP.SET_PRINT_STYLEA(9,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(222,217,100,20,"48.30");
LODOP.SET_PRINT_STYLEA(10,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,58,100,20,"代收費");
LODOP.SET_PRINT_STYLEA(11,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(251,217,100,20,"50.00");
LODOP.SET_PRINT_STYLEA(12,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,58,100,20,"優惠費");
LODOP.SET_PRINT_STYLEA(13,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(280,217,100,20,"4.00");
LODOP.SET_PRINT_STYLEA(14,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(98,101,150,20,"101081005747319387");
LODOP.SET_PRINT_STYLEA(15,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(97,307,150,20,"2008年10月19日 10:28:38");
LODOP.SET_PRINT_STYLEA(16,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(152,584,103,20,"138860016786");
LODOP.SET_PRINT_STYLEA(17,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(95,571,112,20,"06775516");
LODOP.SET_PRINT_STYLEA(18,"FontName","System");
LODOP.SET_PRINT_STYLEA(18,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,135,183,20,"2008年09月(20080901-20080930)");
LODOP.SET_PRINT_STYLEA(19,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(496,572,112,20,"-王府井中心店營");
LODOP.SET_PRINT_STYLEA(20,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,217,100,20,"678.30");
LODOP.SET_PRINT_STYLEA(21,"FontColor",16711680);
LODOP.ADD_PRINT_TEXT(311,58,100,20,"費用合計");
LODOP.SET_PRINT_STYLEA(22,"FontColor",16711680);
LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/證件背景.jpg' />");
LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1);
}
</script>
其中大部分內容還是比較好理解的,不同的功能呼叫不同的函式Preview為預覽、Setup為維護、Design為設計。
在套打的時候,注意需要通過下面程式碼來設定顯示背景圖片(列印的時候,是不列印背景的)。
LODOP.ADD_PRINT_SETUP_BKIMG("<img src=Report/證件背景.jpg' />");LODOP.SET_SHOW_MODE ("BKIMG_IN_PREVIEW",1); //列印預覽時是否包含背景圖
另外,由於報表的內容都是寫在HTML頁面中的,因此在動態設定內容的時候,一可以用指令碼來讀取介面元素作為資料來源,二可以通過後臺程式碼自動生成指令碼程式碼,輸出到前臺頁面中,看具體的需要了。
套打的預覽介面大致如下圖所示,其中藍色部分是需要列印的內容,背景圖片是一個發票的樣板。
下面程式碼是通過指令碼獲取介面元素來取得相應的內容的,這種情況適合於介面上可能會修改一些列印的內容的情景。
LODOP.ADD_PRINT_TEXT(95, 695, 250, 52, document.getElementById("txtCompanyName").innerText); //業戶名稱LODOP.SET_PRINT_STYLEA(1, "FontSize", 14);
LODOP.SET_PRINT_STYLEA(1, "Bold", 1);
var licenseDate = document.getElementById("txtLicenseDate").value;//證件有效期
var licenseYear = "";
var licenseMonth = "";
var licenseDay = "";
if (licenseDate != null && licenseDate != "") {
licenseYear = licenseDate.split("-")[0];
licenseMonth = licenseDate.split("-")[1];
licenseDay = (licenseDate.split("-")[2]).substr(0, 2);
}
LODOP.ADD_PRINT_TEXT(396, 190, 46, 22, validateYear); //有效期 結束 年
LODOP.SET_PRINT_STYLEA(6, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(6, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 253, 30, 22, validateMonth); //有效期 結束 月
LODOP.SET_PRINT_STYLEA(7, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(7, "Bold", 1);
LODOP.ADD_PRINT_TEXT(396, 304, 32, 22, validateDay); //有效期 結束 日
LODOP.SET_PRINT_STYLEA(8, "FontSize", 11);
LODOP.SET_PRINT_STYLEA(8, "Bold", 1);
最後附上它的設計介面,其中生成程式碼功能可以生成用於靜態HTML中的內容佈局顯示,做一定的修改調整就可以用在動態頁面中了。非常有用的一個功能。
相關推薦
Web列印的解決方案之證件套打
由於以前未接觸過套打,一直覺得套打是一個比較神祕和麻煩的事情,因為印表機的位置總是需要調整的,你總不能硬編碼吧?但是如果位置可調,有需要直觀一些來處理,那就比較麻煩了。 在前面介紹過《》的一片文章中提到過那個列印控制元件Lodop,做起套打來感覺還是挺方便的,至少位置調
Web列印控制元件Lodop實現證件套打
第一次接觸Lodop大概是在兩年前了,那時候研究Lodop主要是為了驗證它能不能實現列印時在不修改內容的前提下調整樣式,結果是ok的,如今又一次接觸它,是因為工作中需要使用它了,於是再一次碰面 第一
Unity資源解決方案之AssetBundle
保留 裝包 方法 bundle 以及 pipe 用法 遊戲 cnblogs 1、什麽是AssetBundle AssetBundle是Unity pro提供的一種用來存儲資源的文件格式,它可以存儲任意一種Unity引擎能夠識別的資源,如Scene、Mesh、Material
angularjs解決方案之 遞歸模板
遞歸模板手風琴模式的菜單: 在項目中我們會遇到不知層級的json數據,需要前端人員去遍歷生成View視圖,這種情況下我們就會用到遞歸方法。 angularjs中的dom結構也是可以用遞歸的方式去循環遍歷數據。<ul side-navigation class="nav metismenu"
使用低版本的VS打開高版本項目的解決方案(以VS2008打開VS2010開發的項目為例)
ref tar img 若是 如何 load 分享 項目 targe 使用低版本的VS打開高版本項目的解決方案,這裏以VS2008打開VS2010開發的項目為例。 右鍵項目的sln文件以記事本的方式打開: 將對應的前兩列版本各降到對應的版本,這邊的11.00改為10.00
前端多層回調問題解決方案之$.Deferred
fail -s 使用 defer 解決方法 == 默認 don blog javascript引擎是單線程的,但是通過異步回調可以實現IO操作並行執行能力,當業務邏輯復雜的時候我們就進入回調地獄。 本文講得ajax是在jquery1.5以前的版本,目的旨在讓我們理解延遲對象
ES6 異步編程解決方案 之 Promise 對象
詳解 on() 基本 ack 地獄 down 場景 fill success 一、Promise 概述 Promise 對象是 ES6 提供的原生的內置對象 Promise 是異步編程的一種解決方案(異步代碼同步化),比傳統的解決方案——回調函數和事件——更合理和更強大
集群環境下定時調度的解決方案之Quartz集群
water err eas ask res article 解決問題 class lis 集群環境可能出現的問題 在上一篇博客我們介紹了如何在自己的項目中從無到有的添加了Quartz定時調度引擎,其實就是一個Quartz 和Spring的整合過程,很容易實現,但是我們現在企
GMap.Net解決方案之在WinForm和WPF中使用GMap.Net地圖插件的開發
aac dem play 設計實現 成本 這就是 sage 就是 pes 在做地理位置相關的開發時,總是面臨高額地圖引擎費用讓大部分用戶望而卻步,加之地圖數據又是天價,那麽GMap.NET就是首選了,它本身就是開源免費,服務器可以在本地緩存,以後訪問時就可以直
解決方案之網站大資料高併發
大資料處理 1、資料庫 垂直拆分:根據業務把表放到不同的資料庫,解決表之間的IO競爭 水平拆分:根據某種規則把單表資料分成多張表儲存,解決單表資料量大的問題 索引:根據業務場景建立合理的索引,如果資料量很小建議使用索引(300條以內) 索引使用場景: 動作描述
終極解決方案之——Centos7由於誤刪或更新python導致 No module named yum
之前由於不懂yum和python之間的關係,因為一直在學python3,看到系統裡/usr/lib下的python2我就直接刪了,結果。。。 可能還有人是因為python升級的原因,即系統自帶的python2還在,但由於升級導致問題,現在就這兩個原因提出我的解決方案。 1.由於python升級導致yum無
區域網常見問題解決方案之你可能沒有許可權使用網路資源無法訪問網路上的芳鄰
最近公司區域網一臺公共的計算機,工作組的其他成員不能訪問該計算機,折騰了好久,在網上終於找到有效的解決方案,分享如下: 計算機系統:Windows XP 方法一: 一、在工具->資料夾選項->檢視,將"使用簡單檔案共享"前面的勾勾去掉;二、在控制面板->
物聯網生物學解決方案之北極黃鼠“智慧手環”
我們都知道“智慧手環”。把這些智慧裝備綁在手上,它們就能夠告訴你走了多少步,消耗了多少卡路里。而類似的技術在科學家那裡,會做什麼呢?他們用來“偷窺”一種齧齒動物的祕密生活。這個不難理解,當物聯卡+智慧手環搭配的生物物聯網解決方案遇到北極黃鼠會發生什麼奇妙的事情呢
Java高併發解決方案之非同步處理
(() -> { // 請求1 CompletableFuture<List<Integer>> completionStage1 = CompletableFuture.supplyAsync(() -> { //
Spark專案實戰-資料傾斜解決方案之原理以及現象分析
一、資料傾斜的原理 在執行shuffle操作的時候,大家都知道是按照key來進行values的資料的輸出、拉取和聚合的。同一個key的values,一定是分配到一個reduce task進行處理的。假設多個key對應的values,總共是90萬。但是問題是可能某個key對應
Spark專案實戰-資料傾斜解決方案之將reduce join轉換為map join
一、reduce端join操作原理 二、map端join操作原理 三、適用場景 如果兩個RDD要進行join,其中一個RDD是比較小的。一個RDD是100萬資料,一個RDD是1萬資料。(一個RDD是1億資料,一個RDD是100萬資料) 其中一個RDD必須是比較
JS跨域:1.解決方案之-SpringMVC攔截器
package com.bdqn.utils; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResp
CORS ———— 跨域解決方案之二
其他跨域方案請看: 以下介紹CORS跨域解決方案 一、什麼是CORS? CORS (Corss-Orign Resource Sharing) 是W3C工作草案,是一份瀏覽器技術的規範。定義了跨域資源訪問時,瀏覽器和伺服器之間如何通訊,使用自定義的http頭部允
解決方案之Android 國際化資源完美相容6.0,7.0,8.0
在Android世界中,一般App應用的語言是根據Android系統顯示的語言變化的,但是有時候有些應用需要單獨設定App的顯示語言。 Android 國際化實現 國際化一般最常用的是支援簡體中文和美式英文。 思路: 切換Project檢視 建立多個國家的資原始
解決方案之配置MySQL遠端登陸/訪問
如今我們的應用一般部署在雲伺服器上,為了節約成本一些公司會採用買完伺服器自己安裝MySQL資料庫的方案。但是預設在這些雲伺服器上安裝的MySQL資料庫是無法遠端訪問的,一般原因有三個: 伺服器上防火牆限制 web控制端埠策略沒有開放3306埠 MySQL資料庫沒有