平常瀏覽網頁和文檔的時候,隨處可見打印兩個字,有時候不小心點到或者快捷鍵觸發到,就會彈出一個打印的頁面,上邊顯示的打印機是GoldGrid Virtual Printer,這是計算機的虛擬打印機,打印后就會生成類似掃描件的pdf文檔。當然如果連接了打印機並設置好,可以直接調用到打印機進行真實的打印。
接下來要介紹的是js端進行的一些打印操作:
1.直接調用window的print方法進行打印,效果同直接點擊打印,會將整個頁面進行打印;
2.局部打印:
頁面如下
<h1>不需要打印</h1> <!--printstart--> <div> 這里是需要打印的內容 ..... </div> <!--printend--> <h1>不需要打印</h1>
js如下
1 function doPrint() { 2 var bdhtml=window.document.body.innerHTML; 3 var printstart="<!--printstart-->"; 4 var printend="<!--printend-->"; 5 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17 ,bdhtml.indexOf(eprnstr)); 6 window.document.body.innerHTML=prnhtml; 7 window.print(); 8 }
原理就是將不需要打印的內容手動去除,然后調用window的打印方法打印。
3.過濾打印,與2類似,將不需要打印的內容進行隱藏,如:
<style type="text/css"> @media print { .noprint{ display: none; } } </style>
<style type=
"text/css"
media=
"print"
>
.noprint{
display
:
none
;
}
</style>
<!--startprint--> <div class="content"> <button class="noprint">預覽</button> <button class="noprint">打印</button> 這里是需要打印的內容 ..... </div> <!--endprint-->
4.使用jqprint進行打印
下載引入jqprint后,使用時直接
$(
"#ddd"
).jqprint();
就可以,打印該id元素內的內容,很容易理解。
該方法的參數是一個對象
{
debug:
false
,
importCSS:
true
,
printContainer:
true
,
operaSupport:
false
}
1) debug: false, //如果是true則可以顯示iframe查看效果(iframe默認高和寬都很小,可以再源碼中調大),默認是false
2) importCSS: true, //true表示引進原來的頁面的css,默認是true。(如果是true,先會找$("link[media=print]"),若沒有會去找$("link")中的css文件)
3) printContainer: true, //表示如果原來選擇的對象必須被納入打印(注意:設置為false可能會打破你的CSS規則)。
4) operaSupport: false //表示如果插件也必須支持谷歌opera瀏覽器,在這種情況下,它提供了建立一個臨時的打印選項卡。默認是true