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

snowell 發布于2019-08-22 14:51 / 3373人閱讀

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

頁面效果：

第一頁

第N頁

業務需求：

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

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

頁眉

頁腳

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

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

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

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

html結構：

css樣式：

js部分：

云服務器 GPU云服務器云服務器都有幾個固定ip php網頁自動打印固定帶寬的ECS 專線ip是固定的嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92935.html

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

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

bladefury 2019-08-30 14:02 評論0 收藏0
在React項目中，如何優雅的優化長列表

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

yearsj 2019-08-23 13:51 評論0 收藏0
在React項目中，如何優雅的優化長列表

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

Java_oldboy 2019-08-29 17:28 評論0 收藏0
數據結構第一講

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

k00baa 2019-08-26 10:18 評論0 收藏0