做過很多的Web項目,大多數在列印頁面内容的時候,采用的都是通過Javascript調用系統内置的列印方法進行列印,也就是調用PrintControl.ExecWB(?,?)實作直接列印和列印預覽功能。列印的效果及控制性雖然不是很好,但是也能勉強使用,應付一般的列印還是可以的了。
代碼如下所示:
//調用PrintControl.ExecWB(?,?)實作直接列印和列印預覽功能。(直接用系統提供的print()方法列印無法隐藏某些區域)
//preview:是否顯示預覽。null/false:不顯示,true:顯示
function printPage(preview)
{
try
{
var content=window.document.body.innerHTML;
var oricontent=content;
while(content.indexOf("{$printhide}")>=0) content=content.replace("{$printhide}","style='display:none'");
if(content.indexOf("ID=\"PrintControl\"")<0) content=content+"<OBJECT ID=\"PrintControl\" WIDTH=0 HEIGHT=0 CLASSID=\"CLSID:8856F961-340A-11D0-A96B-00C04FD705A2\"></OBJECT>";
window.document.body.innerHTML=content;
//PrintControl.ExecWB(7,1)列印預覽,(1,1)打開,(4,1)另存為,(17,1)全選,(10,1)屬性,(6,1)列印,(6,6)直接列印,(8,1)頁面設定
if(preview==null||preview==false) PrintControl.ExecWB(6,1);
else PrintControl.ExecWB(7,1); //OLECMDID_PRINT=7; OLECMDEXECOPT_DONTPROMPTUSER=6/OLECMDEXECOPT_PROMPTUSER=1
window.document.body.innerHTML=oricontent;
}
catch(ex){ alert("執行Javascript腳本出錯。"); }
}
function printConten(preview, html)
var content=html;
var oricontent=window.document.body.innerHTML;
上面兩個函數放在一個Js檔案中,在頁面内容中通過應用該腳本檔案并調用進一步封裝的函數即可列印指定部分的内容:
<script language="javascript">
function Print(preview) {
var text = document.getElementById("content").innerHTML;
printConten(preview, text);
}
列印的效果大緻如下圖所示,如果列印的頁面在架構頁面中,那麼需要標明“僅列印標明架構”的選項。
采用此種方法,不需要安裝任何控件,具有很好的相容優勢,不過出來的報表内容,好像控制起來會比較麻煩一些,特别對于一些報表方面的列印,需要輸出複雜的内容是,也有一定的缺陷,但總體來說,也是一個較好的選擇。
後來在需要做一些證件套打方面的工作,這個控件就做不到了,是以需要一種方法或者控件,能夠較好處理套打方面的事情。
無意間,發現一個比較好的列印控件,支援各種格式的列印,還有我關心的證件套打功能,功能強大,使用也很簡單的,非常值得推薦。
控件的相關位址:
應用這個控件,普通報表的列印效果如下所示:
上面兩個報表的列印其實都差不多,都是列印部分的HTML内容,不過後者看起來要好一點,而且提供很完善的報表功能設定。
代碼大緻如下所示。
</script>
<script language="javascript" src="http://www.cnblogs.com/Scripts/CheckActivX.js"></script>
<object id="LODOP" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> </object>
var LODOP = document.getElementById("LODOP"); //這行語句是為了符合DTD規範
CheckLodop();
<script language="javascript" type="text/javascript">
function Preview() {//列印預覽
CreateLicenseData();
LODOP.SET_SHOW_MODE("PREVIEW_IN_BROWSE", 1);
LODOP.PREVIEW();
};
function Setup() {//列印維護 給使用者調整位置
LODOP.PRINT_SETUP();
function Design() {//列印設計 開發人員設定内容和位置
LODOP.PRINT_DESIGN();
function CreateLicenseData() {
LODOP.PRINT_INIT("查詢報表");
LODOP.ADD_PRINT_HTM(20, 40, 610, 900, document.all("content").innerHTML);
</script>
很多時候,我們也沒的内容,都是通過CSS來控制美觀的,是以有時候,我們列印部分HTML,沒有這些樣式的話,那麼出來的Table格式和字型,可能都會發生變化,不太好看。那麼就需要進行HTML的樣式設定。
如果給列印内容設定了樣式,那麼出來的界面效果就好很多了。
設定樣式的代碼如下所示。
LODOP.PRINT_INIT("申請處理單");
var strBodyStyle = "<link type='text/css' rel='stylesheet' href='http://www.cnblogs.com/Themes/Default/style.css' /><style><!--table { border:1;background-color: #CBCBCC } td {background-color:#FFFFFE;border: 1; } th { background-color:#F1F1F3;padding-left:5px;border:1}--></style>";
var strFormHtml = strBodyStyle + "<body>" + document.getElementById("content").innerHTML + "</body>";
LODOP.ADD_PRINT_HTM(20, 40, 610, 900, strFormHtml);