強大的web列印外掛--Lodop
最近公司有個專案需要實現記錄列印功能，在網上找到了一個很好的列印外掛Lodop，它是一個專門針對web頁面列印的控制元件，裡面封裝了很多的JS API，使用者只要根據自己特定的需要呼叫裡面相應的介面，就可以實現各種很複雜的列印的功能，例如記錄頁面、圖片包括複雜的圖表等等它都能夠幫你實現，在用的過程中，還發現它還能夠列印條形碼、公章，而且它還能實現將記錄匯出到一個excel檔案當中，無論你的表格多麼複雜，它都能幫你實現，而且只需要在前臺控制就可以了，實在是非常強大呀！！不過，遺憾的是，它是收費的，收費與不收費的區別是免費版的直接打印出來會在頁面左下角顯示：本頁由試用版列印控制元件Lodop版本號輸出，如果使用者先預覽後列印不會出現這行文字，不過我在網上查了一個，大家都說它的高階版本收取的費用不是很高，對於企業專案，如果這些內容會有影響的話，就去花點錢買個正版的咯，如果影響不大，那麼我們就可以直接用這個免費的控制元件啦！！詳細的API操作介面和Demo例項可以在我的部落格裡面進行下載：
這個是我專案中實現的列印頁面，連上印表機就可以蔣其中的內容打印出來咯：
下面是我使用這個外掛開始將頁面資料匯出頁面：
好了，下面來看看它吧：
環境搭建：
根據相應的作業系統，安裝install_lodop32.exe檔案，它裡面包含兩個exe檔案install_lodop32.exe和install_lodop64.exe，在頁面的頭部中引入:
<!-- 列印外掛 --> <script type="text/javascript" src="<%=basePath %>js/LodopFuncs.js"></script> <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed> </object> <!-- 列印end -->
當我們在執行操作的時候，它會根據相應的作業系統(32位or64位)，選擇相應的exe檔案，下載安裝，這個安裝檔案比較小，所以安裝起來也比較方便。解除安裝它也很簡單，只要複製這個exe檔案，然後改名為：uninstall_lodop32.exe，點選執行即可,安裝後我們就可以使用裡面的JS函數了：
|
| 最基本的列印過程至少有初始化語句、添內容語句和列印語句三部分組成，例如： |
|
LODOP.PRINT_INIT("列印任務名"); //首先一個初始化語句 LODOP.ADD_PRINT_TEXT(0,0,100,20,"文字內容一");//然後多個ADD語句及SET語句 LODOP.PRINT(); //最後一個列印(或預覽、維護、設計)語句 |
結合各種函式，輸出使用者需要的結果：這裡我使用的是我的案例，專案中由於檔案內容比較長，也比較寬，所以我需要橫向列印，並且需要列印很多頁，每頁都要有固定標題和頁尾，例如第1頁/共3頁，程式碼如下：
var LODOP; //宣告為全域性變數
function preview(){
CreatePrintPage();
//列印預覽
LODOP.PREVIEW();
}
function setup(){
CreatePrintPage();
//LODOP.PRINT_SETUP();
LODOP.PRINT_DESIGN();//列印設定
}
function print(){
CreatePrintPage();
LODOP.PRINT(); //列印
}
//初始化頁面
function CreatePrintPage(){
//得到LODOP物件，注意head標籤裡面需引入object和embed標籤
LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
//封裝我們的html元素
var strBodyStyle="<style>table,td{border:1 solid #000000;border-collapse:collapse}</style>"; //獲得id為content標籤裡面的html元素
var strFormHtml=strBodyStyle+"<body>"+document.getElementById("content").innerHTML+"</body>";
//列印初始化，頁面距離頂部10px，距離左邊10px，寬754px，高453px，給列印設定個標題
LODOP.PRINT_INITA(10,10,754,453,"列印控制元件操作");
//設定列印頁面屬性：2：表示橫向列印，0：定義紙張寬度，為0表示無效設定，A4：設定紙張為A4
LODOP.SET_PRINT_PAGESIZE (2, 0, 0,"A4");
//設定文字，引數(距離頁面頭部，距離頁面左邊距離，文字寬度，文字高度，文字內容)
LODOP.ADD_PRINT_TEXT(21,300,300,30,"${unitType}${flowval }檢修記錄\n");
//給所新增的文字定義樣式,0：表示新新增的元素，相應的屬性，相應的值
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);//固定標題,設定衛頁首頁尾
LODOP.SET_PRINT_STYLEA(0,"Horient",2);
LODOP.SET_PRINT_STYLEA(0,"Bold",1);
//同上
LODOP.ADD_PRINT_TEXT(40,60,350,30,"機車號:${datePlan.jcType } ${datePlan.jcnum } 修程:${datePlan.fixFreque} 檢修日期:${datePlan.kcsj }");
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
//新增html元素
LODOP.ADD_PRINT_HTM(63,38,684,330,strFormHtml);
LODOP.SET_PRINT_STYLEA(0,"FontSize",15);
LODOP.SET_PRINT_STYLEA(0,"ItemType",4);
LODOP.SET_PRINT_STYLEA(0,"Horient",3);
LODOP.SET_PRINT_STYLEA(0,"Vorient",3);
//新增一條線，引數(開始短點距離頭部距離，開始端點距左邊距離，結束端點距頭部距離，結束端點距左邊距離)
LODOP.ADD_PRINT_LINE(53,23,52,725,0,1);
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
LODOP.SET_PRINT_STYLEA(0,"Horient",3);
LODOP.ADD_PRINT_LINE(414,23,413,725,0,1);
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
LODOP.SET_PRINT_STYLEA(0,"Horient",3);
LODOP.SET_PRINT_STYLEA(0,"Vorient",1);
//LODOP.ADD_PRINT_TEXT(421,37,144,22,"左下腳的文字小標題");
//LODOP.SET_PRINT_STYLEA(0,"Vorient",1);
LODOP.ADD_PRINT_TEXT(421,542,165,22,"第#頁/共&頁");
LODOP.SET_PRINT_STYLEA(0,"ItemType",2);
LODOP.SET_PRINT_STYLEA(0,"Horient",1);
LODOP.SET_PRINT_STYLEA(0,"Vorient",1);
}
上面的函式都是自己通過學習它的API聯合起來用的，我的註釋可能會有些看不懂，希望大家能把API下載下來進行研究，其中它實現了很多功能哦！
| 1、畫一個名片大小的矩形邊框： |
| LODOP.ADD_PRINT_RECT(10,55,360,220,0,1); |
| 邊框離紙張頂端10px(px是絕對值長度，等於1/96英寸,下同)距左邊55px、寬360px、高220px、 |
| 框為實線(0-實線 1-破折線 2-點線 3-點劃線 4-雙點劃線)、線寬為1px |
| 2、設定基本列印風格： |
| LODOP.SET_PRINT_STYLE("FontSize",11); |
| "FontSize"是系統關鍵字，表示設定字型大小，11是字型大小值，單位是pt。 |
| 3、在矩形框內列印姓名欄： |
| LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德強"); |
| 姓名欄離紙張頂端20px、距左邊180px、寬100px、高25px、內容為“郭德強” |
| 4、設定姓名欄的列印風格： |
| LODOP.SET_PRINT_STYLEA(2,"FontName","隸書"); |
| LODOP.SET_PRINT_STYLEA(2,"FontSize",15); |
| 2是姓名欄的增加順序號,"FontName"和"FontSize"是系統關鍵字,表示設定字型名和字型大小。 |
| "隸書"是字型名值,同作業系統的字型名，15是字型大小值，單位是pt。 |
| 序號設0表示最新物件，注意SET_PRINT_STYLEA與SET_PRINT_STYLE的區別。 |
| 5、下面列印其職務、地址、電話等(用基本風格)： |
| LODOP.ADD_PRINT_TEXT(53,187,75,20,"科學家"); LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址：中國北京社會科學院附近東大街西衚衕"); LODOP.ADD_PRINT_TEXT(138,132,166,20,"電話：010-88811888"); |
| 6、在傳送以上指令前，一般要初始化並設定列印任務名： |
| LODOP.PRINT_INIT("列印外掛功能演示_程式碼功能_名片"); |
| 初始化並指定列印任務名是"列印外掛功能演示_程式碼功能_名片" |
利用Lodop實現將頁面表格元素匯出為excel：
function SaveAsFile(){
//得到LODOP物件
var LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM'));
LODOP.PRINT_INIT(""); //初始化，因為不需要列印，所以不需要為其設定標題
//增加打印表格,（距離頭部距離、距離左邊、寬度、高度），得到相應表格中的html元素
LODOP.ADD_PRINT_TABLE(100,20,500,80,document.getElementById("content").innerHTML);
//設定相應模式
LODOP.SET_SAVE_MODE("Orientation",1); //Excel檔案的頁面設定：橫向列印 1-縱向,2-橫向;
LODOP.SET_SAVE_MODE("LINESTYLE",1);//匯出後的Excel是否有邊框
LODOP.SET_SAVE_MODE("CAPTION","行安檢修記錄");//標題欄文字內容
//LODOP.SET_SAVE_MODE("CENTERHEADER","行安檢修記錄");//頁首內容
//LODOP.SET_SAVE_MODE("PaperSize",9); //Excel檔案的頁面設定：紙張大小 9-對應A4
//LODOP.SET_SAVE_MODE("Zoom",90); //Excel檔案的頁面設定：縮放比例
//LODOP.SET_SAVE_MODE("CenterHorizontally",true);//Excel檔案的頁面設定：頁面水平居中
//LODOP.SET_SAVE_MODE("CenterVertically",true); //Excel檔案的頁面設定：頁面垂直居中
//LODOP.SET_SAVE_MODE("QUICK_SAVE",true);//快速生成（無表格樣式,資料量較大時或許用到）
//儲存檔案，以視窗彈出對話方塊的方式，讓使用者去選擇檔案儲存的位置，引數為檔案儲存的預設名稱
LODOP.SAVE_TO_FILE("${datePlan.jcType }-${datePlan.jcnum }-${unitType}檢修記錄.xls");
};
這裡本人所列出來的兩個demo只是本人在專案中所用的，對其綜合應用了，其實它裡面有很多方法可以供我們去操作，實現各種各樣的功能，我們只需要設定其中的引數，給列印頁面各個元素定好位置，距離頭部距離、距離左邊距離、垂直或者水平擺放、居左還是居中對齊等等，我們都可以在裡面進行相應的設定，自己把各個元素定位好，我相信它肯定能實現我們列印時所想要的效果！！
俗話說，說一百遍看一萬遍，不如自己來寫一遍，大家嘗試著去研究一下吧！！