国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

snowell / 3394人閱讀

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

頁面效果：

第一頁

第N頁

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

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

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

頁眉

頁腳

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

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

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

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

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

css樣式：

js部分：

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92935.html

相關(guān)文章

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

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

    bladefury 評論0 收藏0

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

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

    yearsj 評論0 收藏0

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

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

    Java_oldboy 評論0 收藏0

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

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

    k00baa 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<