我們?cè)诰W(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)有打印頁(yè)面的需求，通過(guò)JS來(lái)實(shí)現(xiàn)的方法有很多。下面本篇文章就來(lái)給大家介紹幾種使用JavaScript打印頁(yè)面的方法，希望對(duì)大家有所幫助。

方式一：window.print()

print() 方法用于打印當(dāng)前窗口的內(nèi)容。

調(diào)用print()方法所引發(fā)的行為就像用戶(hù)單擊瀏覽器的打印按鈕。通常，這會(huì)產(chǎn)生一個(gè)對(duì)話(huà)框，讓用戶(hù)可以取消或定制打印請(qǐng)求。

使用window.print()方法打印的頁(yè)面分幾種情況：

1、整體打印打印

現(xiàn)在就輕松實(shí)現(xiàn)了頁(yè)面的打印，但是這種方式會(huì)將整個(gè)頁(yè)面打印，如果想要實(shí)現(xiàn)指定區(qū)域的打印需要通過(guò)下面的設(shè)置

2、局部打印

首先，在html中，通過(guò)star和end來(lái)標(biāo)記打印區(qū)域

這塊內(nèi)容不需要打印

這里是需要打印的內(nèi)容

.....

這塊內(nèi)容不需要打印

然后，在點(diǎn)擊事件中添加如下代碼function doPrint() {

bdhtml=window.document.body.innerHTML;

sprnstr="";

eprnstr="";

prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));

window.document.body.innerHTML=prnhtml;

window.print();

}

過(guò)濾打印區(qū)域的內(nèi)容

例如

預(yù)覽

打印

這里是需要打印的內(nèi)容

.....

上面的預(yù)覽和打印按鈕不希望打印，如果要過(guò)濾的話(huà)可以做下面的樣式設(shè)置

@media print {

.noprint{

display: none;

}

}

或：

.noprint{

display: none;

}

分頁(yè)打印

使用 window.print() 打印時(shí)，如果內(nèi)容超出會(huì)自動(dòng)分頁(yè)。但是我們?nèi)绻枰远x分頁(yè)范圍，如碰到表格分頁(yè)打印，可以通過(guò)進(jìn)行如下設(shè)置：

方式二、jqprint()

jqprint是一個(gè)基于jQuery編寫(xiě)的頁(yè)面打印的一個(gè)小插件，但是不得不承認(rèn)這個(gè)插件確實(shí)很厲害。

在Web打印的方面，前端的打印基本是靠window.print()的方式進(jìn)行打印的，而這個(gè)插件在其基礎(chǔ)上進(jìn)行了進(jìn)一步的封裝，可以輕松實(shí)現(xiàn)打印網(wǎng)頁(yè)上的某個(gè)區(qū)域，這是個(gè)亮點(diǎn)。

引入

js

function a(){

$("#ddd").jqprint();

}

html

test

test

test

test

test

設(shè)置模板打印$("#printContainer").jqprint({

debug: false,

//如果是true則可以顯示iframe查看效果(iframe默認(rèn)高和寬都很小，可以再源碼中調(diào)大)，默認(rèn)是false

importCSS: true,

//true表示引進(jìn)原來(lái)的頁(yè)面的css，默認(rèn)是true。如果是true，先會(huì)找$("link[media=print]，"若沒(méi)有會(huì)去找$("link")中的css文件)

printContainer: true,

//表示如果原來(lái)選擇的對(duì)象必須被納入打印(注意：設(shè)置為false可能會(huì)打破你的CSS規(guī)則)。

operaSupport: true

//表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true

});

另外還可以使用html 標(biāo)簽引入Webbrowser控件(只兼容IE)或者調(diào)用windows底層打印，報(bào)安全警告，不建議使用(不支持

總結(jié)

以上是生活随笔為你收集整理的jqprint 分页打印_javascript如何实现打印页面？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。