Tôi có một bảng đơn giản với một nút bên dưới nó. Đây là trong phần cơ thể của JSP của tôi như dưới đây:
One
Two
Three
1
2
3
4
5
6
Print
Dưới đây là CSS có quy tắc @Media được cho là định dạng bảng. CSS nằm trong phần đầu của JSP của tôi:
@media print,screen{
table.t1 {
margin: 1em auto;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
.t1 th, .t1 td {
padding: 4px 8px;
}
.t1 thead th {
background: #4f81bd;
text-transform: lowercase;
text-align: left;
font-size: 15px;
color: #fff;
}
.t1 tr {
border-right: 1px solid #95b3d7;
}
.t1 tbody tr {
border-bottom: 1px solid #95b3d7;
}
.t1 tbody tr:nth-child[odd] {
background: #dbe5f0;
}
.t1 tbody th, .t1 tbody tr:nth-child[even] td {
border-right: 1px solid #95b3d7;
}
.t1 tfoot th {
background: #4f81bd;
text-align: left;
font-weight: normal;
font-size: 10px;
color: #fff;
}
.t1 tr *:nth-child[3], .t1 tr *:nth-child[4] {
text-align: right;
}
}
Dưới đây là chức năng JavaScript để in div chứa bảng của tôi. Nó nằm trong phần cơ thể của JSP của tôi:
function printDiv[]
{
var divToPrint=document.getElementById["myDivForPrint"];
newWin= window.open[""];
newWin.document.write[divToPrint.outerHTML];
newWin.document.close[];
newWin.document.focus[];
newWin.print[];
newWin.close[];
}
Trang được định dạng độc đáo trên màn hình. Tuy nhiên, khi tôi nhấp vào nút in và in trang dưới dạng tài liệu XPS, tất cả các định dạng CSS đều bị mất và chỉ nội dung của bảng được in trông thực sự tồi tệ.
Tôi đang làm gì sai? Tôi đang sử dụng IE8 và tôi không thể chuyển sang trình duyệt khác hoặc phiên bản IE mới hơn.
Quy tắc @Media
Nếu bạn đã thực hiện bất kỳ thiết kế đáp ứng nào, bạn sẽ biết về quy tắc @Media. Cũng như các kích thước màn hình khác nhau, @Media cũng cho phép bạn nhắm mục tiêu vào phương tiện truyền thông in ấn. Đây là một ví dụ: @media rule. As well as different screen sizes, @media also lets you target “print” media. Here’s an example:
Sử dụng quy tắc này, bạn có thể chỉ định CSS tiêu chuẩn của mình là bình thường và sau đó thêm một số kiểu tùy chỉnh sẽ chỉ được sử dụng khi in.
p {lề: 1em 0; }
@Media in {& nbsp;/* ẩn các liên kết bài viết liên quan khi in. */ & nbsp;. }}
/* Hide related article links when printing. */
.related-articles { display: none; }
}
Nếu bạn muốn có số 0 ra khỏi tất cả các kiểu màn hình tiêu chuẩn của bạn và bắt đầu từ đầu, bạn có thể bọc các kiểu màn hình của mình trong một quy tắc @Media khác: @media rule:
Màn hình @Media {& nbsp;/* Street Styles tại đây. */}
/* standard styles here. */
}
@Media in {& nbsp;/* Print Styles tại đây. */}
/* print styles here. */
}
Trang bị phá vỡ thuộc tính
Để đảm bảo nội dung chảy mượt mà trên các trang, bạn sẽ muốn kiểm soát khi nội dung được chia giữa các trang. Ví dụ, có vẻ khó xử nếu một tiêu đề lớn xuất hiện ở cuối trang - bạn muốn nó bắt đầu trên một trang mới thay thế. Tương tự, bạn có thể muốn tránh một bảng trải dài nhiều trang nếu có thể.
Bạn có thể thực hiện việc này bằng cách sử dụng trang phá vỡ trang trước, phá vỡ trang sau và bên trong trang. Bạn có thể đặt giá trị cho các thuộc tính này luôn luôn hoặc tránh.page-break-before, page-break-after, and page-break-inside. You can set the value for these properties to always or avoid.
H2 {& nbsp;/* H2 Các phần tử luôn bắt đầu trên đầu trang mới. */ & nbsp; trang-phá vỡ-trước: luôn luôn;}
/* h2 elements always start on the top of a new page. */
page-break-before: always;
}
Phần.City-Map {& nbsp;/* Phần này luôn chiếm trang hoặc trang riêng của nó. */ & nbsp; trang phá vỡ trang: Luôn luôn; & nbsp; trang-break-sau: luôn luôn;}
/* this section always occupies it's own page or pages. */
page-break-before: always;
page-break-after: always;
}
Bảng {& nbsp;/* bảng không phân chia trên các trang nếu có thể. */ & nbsp; trang phá vỡ trang: Tránh;}
/*
tables don't split across pages if possible. */
page-break-inside: avoid;
}
Mẹo: Lặp lại tiêu đề bảng
Nếu tài liệu của bạn có các bảng trải rộng trên nhiều trang, nó sẽ khó đọc khi được in trừ khi các tiêu đề bảng được lặp lại ở đầu mỗi trang. Điều này khá dễ dàng để thực hiện - chỉ cần sử dụng các yếu tố của TEAD và TBOD trong bảng của bạn.thead and tbody elements in your table.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Thành phố & NBSP; & nbsp; & nbsp; dân số & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Sydney & nbsp; & nbsp; & nbsp; 4,627 triệu [2018] & nbsp; & nbsp; & nbsp;
City
Population
Khi được in, bảng của bạn sau đó sẽ trông giống như thế này:
Mẹo: Thêm hoặc xóa nội dung
Đôi khi bạn có thể muốn thêm nội dung mà chỉ hiển thị khi in. Ví dụ: bạn có thể muốn liên kết các URL sẽ được in. Bạn có thể làm điều này bằng cách sử dụng: sau khi giả tập::after pseudo-element:
@Media in {& nbsp; a [href]: sau {& nbsp; & nbsp; nội dung: "[" attr [href] "]"; & nbsp;}}
a[href]:after {
content: " [" attr[href] "]";
}
}
Bạn cũng có thể muốn ẩn hoặc hiển thị các yếu tố nhất định khi in. Bằng cách kết hợp @Media và hiển thị điều này có thể được thực hiện khá dễ dàng. @media and display this can be done quite easily.
/* Ẩn hình mờ trên màn hình. */. Watermark {& nbsp; hiển thị: none;}
.watermark {
display: none;
}
@Media in {& nbsp;/* ẩn điều hướng khi in. */ & nbsp; nav {& nbsp; & nbsp; hiển thị: ẩn; & nbsp; & nbsp; hiển thị: ban đầu; & nbsp;}}
/* hide the navidation when printing. */
nav {
display: hide;
}
/* show the watermark when printing */
.watermark {
display: initial;
}
}
Mẹo: Sử dụng mô phỏng phương tiện truyền thông CSS để phát triển
Để tăng tốc vòng lặp phản hồi của bạn trong quá trình phát triển, bạn có thể đặt trình duyệt của mình để hiển thị các kiểu in. Để thực hiện điều này trong Chrome trên Mac, các công cụ mở của nhà phát triển mở, sau đó sử dụng phím tắt lệnh-shift-p cho lệnh Run Run và tìm kiếm mô phỏng phương tiện truyền thông in CSS.
Các trình duyệt khác sẽ có một tính năng tương tự trong các công cụ Dev của họ.
Thật không may để xem trang phá vỡ trang mà bạn sẽ cần phải in vào PDF theo cách thủ công mỗi lần.
Mẹo nâng cao: Trẻ mồ côi và góa phụ
Các thuộc tính trẻ mồ côi và góa phụ kiểm soát cách văn bản trong một phần tử được phân chia trên các trang. Đôi khi điều chỉnh các giá trị này có thể cải thiện khả năng đọc của tài liệu in của bạn.orphans and widows properties control how text in an element is split across pages. Sometimes tweaking these values can improve the readability of your printed document.
p {& nbsp;/* nếu không có ít nhất ba dòng trước trang & nbsp; & nbsp; Phá vỡ, di chuyển phần tử đến đầu một trang mới. */ & nbsp; mồ côi: 3;}
/* if there aren't at least three lines before the page
break, move the element to the start of a new page. */
orphans: 3;
}
Ở bên trái bên dưới, những đứa trẻ mồ côi được đặt thành 2, vì vậy đoạn thứ hai bắt đầu trước khi trang bị vỡ. Bằng cách đặt trẻ mồ côi thành 3, như ở bên phải, đoạn văn bị buộc phải bắt đầu trang tiếp theo.orphans is set to 2, so the second paragraph begins before the page break. By setting orphans to 3, as on the right, the paragraph is forced down to the start of the next page.
Thuộc tính góa phụ trái ngược với trẻ mồ côi - nó chỉ định số lượng dòng tối thiểu có thể ở đầu trang mới.widows property is the opposite of orphans - it specifies the minimum number of lines that can be at the start of a new page.
Mẹo nâng cao: Quy tắc @page
Với quy tắc @page, bạn có thể tùy chỉnh biên trang cho các trang cụ thể.@page rule, you can customise the page margin for specific pages.
@Page: Đầu tiên {& nbsp;/* không có lề trên trang đầu tiên. */ & nbsp; lề: 0;}
/* No margin on the first page. */
margin: 0;
}
@Page {& nbsp;/* Đặt biên độ trên tất cả các trang khác. */ & nbsp; lề: 2cm;}
/* Set a margin on all other pages. */
margin: 2cm;
}
Thật không may, hỗ trợ trình duyệt cho điều này hiện có một chút hạn chế và bạn chỉ có thể sử dụng: đầu tiên,: cuối cùng,: bên trái,: phải và: Trống chọn lựa chọn để chọn các trang.:first, :last, :left, :right and :blank pseudo-selectors to select pages.
Bản tóm tắt
Bây giờ bạn đã quen thuộc với các thuộc tính quan trọng cho bố cục in được hỗ trợ bởi các trình duyệt hiện đại như Chrome, Firefox và Safari.
Thật không may hỗ trợ cho các tính năng bố trí in nâng cao hơn trong các trình duyệt hiện đại thường bị hạn chế. Ví dụ, các trình duyệt don lồng cung cấp một cách tiêu chuẩn để thêm nội dung tiêu đề hoặc chân trang tùy chỉnh bằng CSS. Bạn có thể muốn xem dự án Paged.js cung cấp polyfill cho nhiều trình duyệt có bố cục in hiện đang bị thiếu.paged.js project which offers a polyfill for many of the print layout features browsers are currently missing.
Cuối cùng, nếu bạn đang chạy một ứng dụng web và tìm cách thêm chức năng PDF, hãy xem PaperPlane - API chuyển đổi HTML sang PDF dễ sử dụng của chúng tôi.Paperplane - our easy to use HTML to PDF conversion API.