成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端如何讓網(wǎng)頁(yè)打印時(shí)每一頁(yè)都有固定的頭部，且在達(dá)到固定高度時(shí)自動(dòng)分頁(yè)

bladefury / 2013人閱讀

摘要：頁(yè)面效果第一頁(yè)第頁(yè)業(yè)務(wù)需求網(wǎng)頁(yè)點(diǎn)擊打印時(shí)，打印渲染的頁(yè)面每一頁(yè)的頭部都要有公司而且分頁(yè)時(shí)不能讓某一行的表格斷開(kāi)必須在達(dá)到固定高度時(shí)讓頁(yè)面自動(dòng)分頁(yè)為了實(shí)現(xiàn)上述需求，過(guò)程可謂心塞我首先嘗試著讓每一頁(yè)的頭部都能打印出相同的東西，本來(lái)想偷個(gè)懶，借助

頁(yè)面效果：

第一頁(yè)

第N頁(yè)

業(yè)務(wù)需求：

1.網(wǎng)頁(yè)點(diǎn)擊打印時(shí)，打印渲染的頁(yè)面每一頁(yè)的頭部都要有公司logo；
2.而且分頁(yè)時(shí)不能讓某一行的表格斷開(kāi)（必須在達(dá)到固定高度時(shí)讓頁(yè)面自動(dòng)分頁(yè)）；

為了實(shí)現(xiàn)上述需求，過(guò)程可謂心塞
我首先嘗試著讓每一頁(yè)的頭部都能打印出相同的東西，
本來(lái)想偷個(gè)懶，借助瀏覽器自帶的打印設(shè)置功能，卻發(fā)現(xiàn)行不通行不通
谷歌雖然也有設(shè)置頁(yè)眉頁(yè)腳的功能，但是它有自己固定的格式，根本設(shè)置不了自己想要的內(nèi)容

頁(yè)眉

頁(yè)腳

谷歌不行，我還是不死心，就是想用現(xiàn)成的東西來(lái)實(shí)現(xiàn)，所以呢
我又去嘗試火狐，驚喜不，火狐可以設(shè)置頁(yè)眉頁(yè)腳，然而
并沒(méi)有什么*用，又加不進(jìn)去logo，然后呢
我肯定又去試了一下IE（哼哼，還是不行，我就不截圖演示了）

好吧，我終于有一點(diǎn)點(diǎn)死心了，還是我自己來(lái)搞吧，接著就是各種百度，找方法，看別人的代碼。
中間嘗試過(guò)這種方法：https://codeday.me/bug/20170302/3239.html

這種方法是我當(dāng)時(shí)能找到的我覺(jué)得最需求的方法，但是它有一個(gè)讓人無(wú)法容忍的缺點(diǎn)，
打印渲染時(shí)，每一頁(yè)的頭部會(huì)和內(nèi)容重合在一起，這顯然是不行的！

所以最后還是得重新研究其他方法：
最后達(dá)成目的的思路是：
1.首先在頁(yè)面布局的時(shí)候，去獲取每一行表格內(nèi)容的高度相加再加上其他固定部分的高度，
如果超過(guò)某個(gè)高度（這個(gè)高度大致等于打印時(shí)頁(yè)面的高度）就添加你想要的頭部html結(jié)構(gòu)
2.在這個(gè)高度到達(dá)時(shí)，就讓打印頁(yè)面自動(dòng)分頁(yè)，這個(gè)可以通過(guò)
page-break-before：always這個(gè)css屬性來(lái)實(shí)現(xiàn)

html結(jié)構(gòu)：

css樣式：

js部分：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115720.html

相關(guān)文章

  • 前端如何讓網(wǎng)頁(yè)打印時(shí)每一頁(yè)都有固定的頭部，且在達(dá)到固定高度時(shí)自動(dòng)分頁(yè)

    摘要：頁(yè)面效果第一頁(yè)第頁(yè)業(yè)務(wù)需求網(wǎng)頁(yè)點(diǎn)擊打印時(shí)，打印渲染的頁(yè)面每一頁(yè)的頭部都要有公司而且分頁(yè)時(shí)不能讓某一行的表格斷開(kāi)必須在達(dá)到固定高度時(shí)讓頁(yè)面自動(dòng)分頁(yè)為了實(shí)現(xiàn)上述需求，過(guò)程可謂心塞我首先嘗試著讓每一頁(yè)的頭部都能打印出相同的東西，本來(lái)想偷個(gè)懶，借助 頁(yè)面效果： 第一頁(yè) showImg(https://segmentfault.com/img/bV4kHH?w=554&h=794); 第N頁(yè) s...

    snowell 評(píng)論0 收藏0

  • 在React項(xiàng)目中，如何優(yōu)雅的優(yōu)化長(zhǎng)列表

    摘要：合理的優(yōu)化長(zhǎng)列表，可以提升用戶(hù)體驗(yàn)。這樣保證了無(wú)論如何滾動(dòng)，真實(shí)渲染出的節(jié)點(diǎn)只有可視區(qū)內(nèi)的列表元素。具體效果如下圖所示對(duì)于比無(wú)優(yōu)化的情況，優(yōu)化后的虛擬列表渲染速度提升很明顯。是基于來(lái)實(shí)現(xiàn)的，但是是一個(gè)維的列表，而不是網(wǎng)狀。 ??對(duì)于較長(zhǎng)的列表，比如1000個(gè)數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想要同時(shí)渲染這1000個(gè)數(shù)據(jù)，生成相應(yīng)的1000個(gè)原生dom，我們知道原生的dom元素是很復(fù)雜的，如果長(zhǎng)列表...

    yearsj 評(píng)論0 收藏0

  • 在React項(xiàng)目中，如何優(yōu)雅的優(yōu)化長(zhǎng)列表

    摘要：合理的優(yōu)化長(zhǎng)列表，可以提升用戶(hù)體驗(yàn)。這樣保證了無(wú)論如何滾動(dòng)，真實(shí)渲染出的節(jié)點(diǎn)只有可視區(qū)內(nèi)的列表元素。具體效果如下圖所示對(duì)于比無(wú)優(yōu)化的情況，優(yōu)化后的虛擬列表渲染速度提升很明顯。是基于來(lái)實(shí)現(xiàn)的，但是是一個(gè)維的列表，而不是網(wǎng)狀。 ??對(duì)于較長(zhǎng)的列表，比如1000個(gè)數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想要同時(shí)渲染這1000個(gè)數(shù)據(jù)，生成相應(yīng)的1000個(gè)原生dom，我們知道原生的dom元素是很復(fù)雜的，如果長(zhǎng)列表...

    Java_oldboy 評(píng)論0 收藏0

  • 數(shù)據(jù)結(jié)構(gòu)第一講

    摘要：為什么要學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)語(yǔ)言是相通的人們常說(shuō)，編程語(yǔ)言是相通的，掌握一門(mén)，其他語(yǔ)言很容易就能掌握。其實(shí)，真正想通的不是語(yǔ)言，而是數(shù)據(jù)結(jié)構(gòu)與算法。 為什么要學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu) 1.語(yǔ)言是相通的 人們常說(shuō)，編程語(yǔ)言是相通的，掌握一門(mén)，其他語(yǔ)言很容易就能掌握。個(gè)人認(rèn)為這是一個(gè)似是而非的觀(guān)點(diǎn)，每門(mén)編程語(yǔ)言都離不開(kāi)變量，數(shù)組，循環(huán)，條件判斷這些概念，這似乎能支持上面的觀(guān)點(diǎn)，但是每門(mén)編程語(yǔ)言都有自己的使用范...

    k00baa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<