工具系列 | 使用Lodop進行WEB打印程序開發

時間  2019-11-05
標籤 工具 系列 使用 lodop 進行 web 打印 程序 開發 欄目 HTML 简体版
原文   原文鏈接

Lodop(標音:勞道譜,俗稱:露肚皮)是專業WEB控件,用它既可裁剪輸出頁面內容，又可用程序代碼直接實現 複雜打印。控件功能強大,卻簡單易用,全部調用如同JavaScript擴展語句。javascript

WEB套打可選方案很少，理想的更少，利用免費控件Lodop+JavaScript實現精確套打，算是較爲經典的選擇。這種方案其實比較簡單，利用一個htm文件就能夠實現模板設計過程，幾乎是「空手套」式的開發，但理解這幾個步驟仍是須要點時間，下面一步步詳細演示說明：html

第一步：創建一個空白的模板設計文件

把如下超文本代碼複製到一個本地htm文件中:java

本文模擬EMS特快專遞單的程序開發，文件起名爲printEMS.htm，權且稱它爲模板設計文件。瀏覽器

第二步：用瀏覽器打開該文件

　　在本地文件夾中雙擊該文件就能夠打開，但在進入設計以前，你的機器須要安裝Lodop，若是還沒安裝過，請在以下地址下載安裝文件(找那個install_lodop32.exe文件，Lodop是一個1M左右的小文件)：函數

http://www.mtsoftware.cn/download.html或http://www.c-lodop.com/download.html測試

第三步：準備設計字體

成功安裝Lodop以後再次打開模板設計文件printEMS.htm，點擊其中「模板設計」連接，就彈出以下空白的打印設計窗口：spa

 爲了儘快定位模板中的數據位置，你須要作一張票據掃描圖做爲背景，固然沒有掃描圖也能完成，只是須要多摸索幾回，費點時間而已。下面是我作的EMS掃描圖，你把該圖另存成一個jpg文件，以便咱們一塊兒完成後面的演示步驟。.net

第四步：裝載背景圖並調整圖片大小

在打印設計窗口，點下圖所示的「裝載背景圖...」菜單，調入以上保存的EMS圖片文件。插件

 

裝載背景圖後，點上圖所示的「調整背景圖...」菜單，彈出下圖「背景圖調整」窗口，設定其中的圖片寬度爲209mm,高度113mm會自動變化。這個寬度值是我測量實際票據得來的。若是掃描圖是按1:1比例得到的，那麼調整背景圖這一步就免了，固然要作點這點很難，因此最好仍是在這裏直接設置具體尺寸反倒簡單。

第五步：添加數據內容，開始打印測試

點下圖所示「插入文本項」菜單，添加打印內容，內容項能夠拖拉或精細調整，基本對準以後，點擊「預覽」按鈕（注意旁邊的「打印」按鈕是收費功能，紙上會有水印，而「預覽時的打印」按鈕是徹底免費的，咱們用後者）。把內容打印到薄一點的白紙上，而後在陽光下與真實票據透亮對比，以最左最上的某個內容爲基準，其它內容遠近調整，如此反覆測試直到全部內容相互位置都對準。這一步先作到內容之間的相互位置對準，等下一步處理總體位置。

第六步：總體對準

因爲打印機左邊距或上邊距不必定是零或票據邊緣有偏差，因此儘管第五步打印出來的內容相互之間位置是準確的，但打印到真實票據上仍會總體偏離一些，須要進行總體位置調整。點擊下圖紅圈所示的「紙釘」按鈕，「紙釘」彈起後，整個設計版面就能夠上下左右調整了，而後按上一步的辦法打印測試，直到總體對準成功。爲了不浪費票據，打印時仍可用薄白紙測試，注意此時透光對照時，紙張的左邊沿和上邊沿要與票據對齊，經過觀察內容的位置來判斷是否總體對準。

第七步：生成打印模板的程序代碼

 套打測試成功後，點擊第五步圖中所示的「生成程序代碼」菜單，出現下圖結果，這些代碼就是咱們須要的模板程序代碼，把他們複製出來，準備融合到你的頁面程序中使用。

 

第八步：完成打印模板設計文件

想不想知道WEB套打有啥感受？好，咱們先作一個靜態WEB頁面爽一下：把第七步生成的程序代碼，插入替換第一步的空白設計文件CreatePrintPage函數內，變成以下內容:

把以上內容複製到另一個htm文件printEMS_OK.htm中，雙擊打開它，點其中的打印預覽，就能夠實現簡單的WEB套打了。以上八步基本完成了模板設計，並實現靜態頁面套打，但要把模板代碼融合到實際的WEB程序中，還須要作些工做。

第九步：模板程序代碼的使用

把以上CreatePrintPage函數進行簡單改造，原函數以下：

function CreatePrintPage() {
   LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
   LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
   LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人單位名稱");
   LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的詳細地址");
   LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
   LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人單位名稱");
   LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人詳細地址");
   LODOP.ADD_PRINT_TEXT(289,47,178,22,"內件品名");
   LODOP.ADD_PRINT_TEXT(290,258,100,20,"內件數量");
   LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人電話");
   LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人電話");
};

把其中的打印內容提出來作爲變量參數，函數改爲以下樣式：

function CreatePrintPage(strPName,strJJRXM,strJJRDW,strJJRDZ,strSJRXM,strSJRDW,strSJRDZ,strNJPM,strNJSL,strJJRDH,strSJRDH) {
   LODOP.PRINT_INITA(14,11,800,600,strPName);       //打印任務名
   LODOP.ADD_PRINT_TEXT(95,95,75,20,strJJRXM);      //寄件人姓名
   LODOP.ADD_PRINT_TEXT(123,148,194,20,strJJRDW);   //寄件人單位名稱
   LODOP.ADD_PRINT_TEXT(158,101,238,35,strJJRDZ);   //寄件人的詳細地址
   LODOP.ADD_PRINT_TEXT(92,446,75,20,strSJRXM);     //收件人姓名
   LODOP.ADD_PRINT_TEXT(122,496,208,20,strSJRDW);   //收件人單位名稱
   LODOP.ADD_PRINT_TEXT(160,460,244,35,strSJRDZ);   //收件人詳細地址
   LODOP.ADD_PRINT_TEXT(289,47,178,22,strNJPM);     //內件品名
   LODOP.ADD_PRINT_TEXT(290,258,100,20,strNJSL);    //內件數量
   LODOP.ADD_PRINT_TEXT(92,245,100,20,strJJRDH);    //寄件人電話
   LODOP.ADD_PRINT_TEXT(90,608,75,20,strSJRDH);     //收件人電話
};

這個改造後的JS函數仍是很好理解的，不管寫入js文件仍是直接嵌在頁面內都簡單易用。若是你改變了內容的字體、大小、粗斜體等格式，代碼還會多一些，但整體來講比較簡潔。

第十步：設置紙張高度，實現連續套打

多數套打業務的票據是連續紙，須要精確地分頁，從而保證連續多頁打印不偏移，爲此以上代碼還要在PRINT_INITA以後加一行SET_PRINT_PAGESIZE語句：

function CreatePrintPage() {
   LODOP.PRINT_INITA(14,11,800,600,"套打EMS的模板");
   LODOP.SET_PRINT_PAGESIZE(1,"209mm","113mm","");//設置紙張高度
   LODOP.ADD_PRINT_TEXT(95,95,75,20,"寄件人姓名");
   LODOP.ADD_PRINT_TEXT(123,148,194,20,"寄件人單位名稱");
   LODOP.ADD_PRINT_TEXT(158,101,238,35,"寄件人的詳細地址");
   LODOP.ADD_PRINT_TEXT(92,446,75,20,"收件人姓名");
   LODOP.ADD_PRINT_TEXT(122,496,208,20,"收件人單位名稱");
   LODOP.ADD_PRINT_TEXT(160,460,244,35,"收件人詳細地址");
   LODOP.ADD_PRINT_TEXT(289,47,178,22,"內件品名");
   LODOP.ADD_PRINT_TEXT(290,258,100,20,"內件數量");
   LODOP.ADD_PRINT_TEXT(92,245,100,20,"寄件人電話");
   LODOP.ADD_PRINT_TEXT(90,608,75,20,"收件人電話");
};

其中209mm這個紙寬參數意義不大，主要是113mm這個高度參數，它決定了每頁的走紙距離，對連續打印影響很大。這個值是我測量實際票據高度得來的，包含紙張之間的撕孔間隙。理想的測量方式，是若干頁連起來一塊兒測量取其平均高。

加入紙高控制後的打印預覽以下，你能夠連續打印兩頁內容到同一張長一點的白紙上，測試對照一下看看。把以上加入SET_PRINT_PAGESIZE語句的代碼複製進第三個htm文件printEMS_OKM.htm試試。假如從第二頁開始，內容向下偏移，說明紙張高度設置比實際票據大，就減少113mm這個參數值，不然增大它，這個參數能夠精確到0.1mm。

第十一步：讓操做者本身調整位置

　　以上十步實現的套打能夠很精確，但都是以當前打印機爲前提。若是你的打印程序要面對許多種類型的打印機，甚至一些未知的打印機類型，那麼「打印維護」功能會頗有用處。你能夠根據狀況在程序中把該功能受權給最終操做者或現場技術維護人員，讓使用者本身來調整打印位置，以適應各類類型的打印機。

　　打印維護的指令語句是PRINT_SETUP，進入包含該功能的在線文件PrintEMS_OKMSetup.htm,先在打印維護中調整一下打印內容或總體位置，點「應用」按鈕。關閉瀏覽器後從新打開，進入「打印預覽」，看看是否有關聯變化。下圖是打印維護界面，其中能看到「應用」按鈕和「恢復總體缺省」按鈕的位置。

 

證書打印

 說明：記得安裝插件哇！地址：http://www.lodop.net/download.html

 代碼

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打印證書</title>
</head>
<body>
<script language="javascript" src="/assets/common/js/LodopFuncs.js"></script>
<input type="button" value="證書模板設計" onClick="javascript:CreatePrintPage();LODOP.PRINT_DESIGN();">
<input type="button" value="證書打印預覽" onClick="javascript:CreatePrintPage();LODOP.PREVIEW();">
<input type="button" value="證書打印自定義" onClick="javascript:CreatePrintPage();LODOP.PRINT_SETUP();">

<script>
    var LODOP; //聲明爲全局變量
    /**
     * 自我打印002
     * @constructor
     */
    function CreatePrintPage()
    {
         PrintTpl("Tinywan", 2019, 5, 21, 2019, 5, 31, '北京市', '城關', '人民大會堂3層',
            '第八屆新思想培訓', 'ZS2019050008253923', 340822200008288888, 2019, 10, 1)
    }

    /**
     * 打印模板
     * @constructor
     */
    function PrintTpl($name, $start_y, $start_m, $start_d, $end_y, $end_m, $end_d,
                             $city, $county, $train_name, $address, $cert_no, $id_no, $c_y, $c_m, $c_d) {
        LODOP = getLodop();
        LODOP.PRINT_INITA(-2, -3, 958, 648, "套打證書模板");
        LODOP.ADD_PRINT_TEXT(210, 180, 70, 30, $name);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 290, 54, 30, $start_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 380, 36, 30, $start_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 435, 35, 30, $start_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 522, 55, 30, $end_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 615, 36, 30, $end_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(210, 670, 35, 29, $end_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(265, 120, 71, 28, $city);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 215, 60, 30, $county);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 440, 150, 30, $train_name);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(265, 660, 150, 30, $address);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(370, 440, 200, 30, $cert_no);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(410, 440, 200, 30, $id_no);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);

        LODOP.ADD_PRINT_TEXT(520, 500, 51, 30, $c_y);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(520, 595, 33, 28, $c_m);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        LODOP.ADD_PRINT_TEXT(520, 670, 31, 28, $c_d);
        LODOP.SET_PRINT_STYLEA(0, "FontSize", 13);
        // 證書打印預覽圖片路徑
        LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='/assets/common/img/train_tpl8.png'>");
        LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", 1);
    }
</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程