JS 實(shí)現(xiàn)分頁(yè)打印功能
在調(diào)用window.print()
時(shí),可以實(shí)現(xiàn)打印效果,但內(nèi)容太多時(shí)要進(jìn)行分頁(yè)打印。
在樣式中有規(guī)定幾個(gè)打印的樣式
page-break-before
和page-break-after
CSS屬性并不會(huì)修改網(wǎng)頁(yè)在屏幕上的顯示,這兩個(gè)屬性是用來控制文件的打印方式。
每個(gè)打印屬性都可以設(shè)定4種設(shè)定值:auto、always、left和right。其中Auto是默認(rèn)值,只有在有需要時(shí),才需設(shè)定分頁(yè)符號(hào) (Page breaks)。
page-break-before若設(shè)定成always,則是在遇到特定的組件時(shí),打印機(jī)會(huì)重新開始一個(gè)新的打印頁(yè)。
page-break-before若設(shè)定成left,則會(huì)插入分頁(yè)符號(hào),直到指定的組件出現(xiàn)在一個(gè)左邊的空白頁(yè)上。
page-break-before若設(shè)定成right,則會(huì)插入分頁(yè)符號(hào),直到指定的組件出現(xiàn)在一個(gè)右邊的空白頁(yè)上。
page-break-after屬性會(huì)將分頁(yè)符號(hào)加在指定組件后,而非之前。
在下列程序中您將可以看到這些屬性的設(shè)定,
<HTML> <HEAD> <TITLE>Listing 14-4</TITLE> </HEAD> <BODY> <DIV>This is the first DIV.</DIV> <DIV STYLE="page-break-before:always">This is the second DIV.</DIV> <DIV STYLE="page-break-after:always">This is the third DIV.</DIV> <DIV>This is the fourth DIV.</DIV> <DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV> <DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV> <DIV>This is the last DIV.</DIV> </BODY> </HTML>
值 | 描述 |
auto | 默認(rèn)值。如果必要?jiǎng)t在元素前插入分頁(yè)符 |
always | 在元素前插入分頁(yè)符 |
avoid | 避免在元素前插入分頁(yè)符 |
left | 在元素之前足夠的分頁(yè)符,一直到一張空白的左頁(yè)為止 |
right | 在元素之前足夠的分頁(yè)符,一直到一張空白的右頁(yè)為止 |
inherit | 規(guī)定應(yīng)該從父元素繼承 page-break-before 屬性的設(shè)置 |
在Dom對(duì)象中pageBreakBefore屬性
語(yǔ)法:
Object.style.pageBreakBefore=auto|always|avoid|left|right
<html> <head> <script type="text/javascript"> function setPageBreak() { document.getElementById("p2").style.pageBreakBefore="always"; } </script> </head> <body> <p>This is a test paragraph.</p> <input type="button" onclick="setPageBreak()" value="Set page-break" /> <p id="p2">This is also a test paragraph.</p> </body> </html>
總結(jié)
以上所述是小編給大家介紹的JS 實(shí)現(xiàn)分頁(yè)打印功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個(gè)異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯(cuò)誤處理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)購(gòu)物頁(yè)面左右聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-02-02JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法詳解【面向?qū)ο螅貧w迭代和循環(huán)】
這篇文章主要介紹了JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法,結(jié)合實(shí)例形式分析了javascript基于面向?qū)ο?,回歸迭代和循環(huán)等算法求解一組數(shù)的最小公倍數(shù)與最大公約數(shù)相關(guān)操作技巧,需要的朋友可以參考下2018-05-05JS模擬簡(jiǎn)易滾動(dòng)條效果代碼(附demo源碼)
這篇文章主要介紹了JS模擬簡(jiǎn)易滾動(dòng)條效果代碼,可模擬出滾動(dòng)條拖動(dòng)顯示的效果,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素運(yùn)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04js斷點(diǎn)調(diào)試經(jīng)驗(yàn)分享
給大家詳細(xì)分析了一下JS斷電調(diào)試的心得和經(jīng)驗(yàn),有需要的朋友參考一下吧。2017-12-12JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取漢字首字母拼音、全拼音及混拼音的方法,涉及針對(duì)ChinesePY.js插件的使用及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-11-11微信小程序開發(fā)之?dāng)?shù)據(jù)存儲(chǔ) 參數(shù)傳遞 數(shù)據(jù)緩存
本文主要介紹了微信小程序開發(fā)之?dāng)?shù)據(jù)存儲(chǔ)、參數(shù)傳遞、數(shù)據(jù)緩存的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09js通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例
下面小編就為大家?guī)硪黄猨s通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01