LODOP是一款非常實用的打印插件,其中它的打印引入CSS樣式功能十分強大,它能夠使用戶輕松實現打印時樣式美觀的效果。下面,我們就來詳細探討一下LODOP打印引入CSS的使用方法。
首先,我們需要將需要打印的頁面進行美化,加入相應的CSS樣式。例如,我們要打印一張收款憑證,那么就需要增加相應的表格樣式,以及字體大小和顏色等等。
/* 表格樣式 */ table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid gray; padding: 8px; } /* 字體樣式 */ body { font-size: 16px; color: black; }
當頁面美化完成后,我們就可以使用LODOP的CSS引入功能對其進行打印。使用LODOP打印引入CSS的方法如下:
// 定義打印任務 var LODOP = getLodop(); LODOP.PRINT_INIT("printTaskName"); // 引入CSS樣式 LODOP.ADD_PRINT_CSS("", "stylesheet", "screen"); // 添加打印內容 LODOP.ADD_PRINT_TABLE(0, 0, "100%", "100%", $("#printArea")[0].outerHTML); // 執行打印 LODOP.PREVIEW();
其中,ADD_PRINT_CSS函數用于導入頁面中的CSS樣式,可以在函數中直接使用CSS樣式集,第二個參數表示樣式的類型,這里是stylesheet,第三個參數為screen表示當前屏幕的樣式。
ADD_PRINT_TABLE函數用于將需要打印的內容添加到打印任務中,該函數的第一個參數是打印內容的位置,這里我們使用了全屏;第二個參數是打印內容的左上角x方向的位置;第三個參數是打印內容的左上角y方向的位置;第四個參數是需要打印的頁碼內容,這里我們使用了jQuery的outerHTML方法來獲取整個打印區域的HTML代碼。
最后,通過LODOP.PREVIEW函數來實現打印預覽效果。這樣,我們就可以通過LODOP的CSS引入功能,輕松地實現打印時樣式美觀的效果,提高了打印效果和用戶體驗。
上一篇html5純代碼
下一篇Love...css