比較好用的web打印控件——Lodop

前一段時間公司一項目比較特殊，客戶要求打印單必須是淘寶上賣的那種三聯打印單。如果還是使用原來系統自帶的打印的話，就會造成無法打印出來理想的效果，於是找了下相關的打印控件，比較網絡上比較流行的幾款插件，最終發現，還是Lodop比較好用一些。下面寫下它的基本用法。

1、准備工作，下載控件及官方demo

下面給出官方的下載地址：http://www.lodop.net/download.html

2、基本使用

由於Lodop控件是一個exe程序，所以第一次使用的時候，需要提示用戶安裝這個控件（控件大小在2M左右），注意Lodop根據操作系統類型不同（X86還是X64），分為install_lodop32.exe 和install_lodop64.exe

(1)提示用戶安裝控件

在頁面的head標簽內，寫下如下代碼：

 

注意：/ControlPackage/Lodop 這個目錄是我自己創建的目錄，如果你自己使用，可修改為自己的目錄

function CheckIsInstall() { 
try { 
var LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); 
if ((LODOP != null) && (typeof(LODOP.VERSION) != "undefined")) { 
alert("本機已成功安裝過Lodop控件!\n 版本號:" + LODOP.VERSION); 
} 
} catch (err) { 
//alert("Error:本機未安裝或需要升級!"); 
} 
};

具體調用代碼：

<input type="button" value="檢查是否安裝打印控件" onclick="JAVASCRIPT: CheckIsInstall()" />

(2)打印頁面內容

由於我打印的內容是一個form表單下的table表格，所以調用的是ADD_PRINT_TABLE，這個函數，如果大家打印html或者其他可以參考這篇文章——lodop相關參數和講解。

注意：打印的內容的樣式，一定要直接寫在頁面上，不要使用css樣式

下面貼出來打印form1表單的table標簽內容的js代碼。

var LODOP; //聲明為全局變量 
function prn1_preview() { 
CreateOneFormPage(); 
LODOP.PREVIEW(); 
}; 
function CreateOneFormPage() { 
LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); 
LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表單一"); 
LODOP.SET_PRINT_STYLE("FontSize", 14); 
LODOP.SET_PRINT_STYLE("Bold", 1); 
LODOP.ADD_PRINT_TABLE("5mm", "0mm", "230mm", "140mm", document.getElementById("form1").innerHTML); 
};

打印內容：

<input id="btnPrint2" value="打 印" type="button" onclick="javascript: prn1_preview()" />