In tiêu đề trong mỗi trang

Question

Tôi đã tạo xong một báo cáo và bước tiếp theo là tạo tiêu đề sẽ được in trong mỗi trang. Tôi đã thử sử dụng các giải pháp được cung cấp trong How to use HTML to print header and footer on every printed page of a document? - nhưng chúng dường như không hoạt động tốt trên các trình duyệt webkit.

Bạn có ý tưởng triển khai tùy chọn này trong báo cáo của mình không?

Answer 1

Check-out này: http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 2

In ấn header và footer trên mỗi trang là nhiệm vụ rất khó khăn, nếu bạn sử dụng thẻ div. Trong dự án của tôi, tôi đã tìm kiếm gần như toàn bộ trang web và thấy rằng để in đầu trang và chân trang mỗi trang bạn phải sử dụng các bảng và các quy tắc CSS, không sử dụng bảng và css, bạn không thể in các tiêu đề trên mỗi trang. Tôi cung cấp cho bạn mã để làm như vậy như dưới:

<style> 
    @media screen{thead{display:none;}} 
    @media print{thead{display:table-header-group; margin-bottom:2px;}} 
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}} 
</style> 

Đầu tiên quy tắc CSS làm cho điều đó thead của bảng sẽ không được hiển thị trên màn hình cho người dùng và quy tắc thứ hai định nghĩa rằng trong in thead được hiển thị như Bảng- nhóm tiêu đề như quy tắc này sẽ hiển thị tiêu đề trên mỗi trang nếu bạn bỏ qua tiêu đề này sẽ không in trên từng trang và quy tắc thứ ba để duy trì lề trang trùng lặp đầu trang hoặc chân trang và mã html của bạn sẽ như sau:

<table> 
    <thead> 
     <tr> 
      <th> <--- Your header text would be placed here ---> </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <--- Your printing text would be place here ---> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Điều cuối cùng, tôi đã thử mã điều trên IE, Safari, Firefox và Chrome và muốn cho bạn biết rằng trên Chrome đầu r chỉ được in trên trang đầu tiên. Tôi cũng đã báo cáo lỗi nhiều lần nhưng Chrome không làm bất kỳ điều gì về vấn đề này.

Answer 3

Bạn có thể sử dụng iframe nhưng tôi không khuyên bạn không nên sử dụng iframe.

Nếu bạn tạo báo cáo động, bạn đặt cược tốt nhất sẽ thêm tiêu đề vào trang được tạo khi tạo. Đây là kỹ thuật được sử dụng rộng rãi nhất.

Tùy chọn khác có thể đang sử dụng thuộc tính css content.

div#main:before { 
    content: "<p>I appear before the div tag</p><hr />" 
} 

Note: IE8 chỉ hỗ trợ the content property nếu một !DOCTYPE được chỉ định.

Answer 4

Tính đến hôm nay các lỗi trên webkit.org vẫn không được giải quyết: https://bugs.webkit.org/show_bug.cgi?id=17205

tôi đã cùng một vấn đề làm việc với một động cơ webkit dùng để chuyển HTML sang PDF. Điều này làm việc cho tôi:

Trước tiên hãy css của bạn có sẵn cho tất cả các loại phương tiện truyền thông

<style type="text/css" media="all"> 

Hãy chắc chắn rằng tài sản hiển thị cho thead được thiết lập:

thead { display: table-header-group;} 

một Cuối cùng, để khắc phục vấn đề nơi hàng của bảng bị chồng chéo bởi các tiêu đề hoặc hàng được cắt giảm một nửa tại thời điểm ngắt trang

table { page-break-inside:auto } 
tr { page-break-inside:avoid; page-break-after:auto } 
thead tr th{ height: 50px;}