Khi bạn in một trang Web từ trình duyệt Web của mình, bạn sẽ nhận thấy rằng bản in có chứa một số thông tin bổ sung như số trang, ngày tháng và URL của trang web ở cuối trang. Đôi khi bạn có thể không cần thông tin này trong bản in của mình để thu dọn công việc của mình.
Vì vậy, đây là một vài phương pháp cho phép bạn in các trang web mà không cần thêm thông tin xuất hiện ở cuối trang.
Lần cuối cùng bạn in một trang web là khi nào? . Ví dụ
Dự án của tôi markdeep-slides, được xây dựng dựa trên trình kết xuất Markdown trong trình duyệt Markdeep để cho phép tạo và phát lại trang trình bày liền mạch, không cần thiết lập, dựa vào công cụ in tích hợp sẵn của trình duyệt để xuất PDF
Tương tự, markdeep-thesis, mà sự phát triển ban đầu là một phần của luận án Thạc sĩ của tôi [với mục đích sắp chữ nó], sẽ trở nên vô nghĩa nếu không có tính năng in trong trình duyệt vững chắc
Vì tôi là người không thể sửa chữa được2, nên tôi cũng đã định dạng mẫu sơ yếu lý lịch cá nhân và mẫu thư xin việc của mình [dựa trên sơ yếu lý lịch html của Min-Zhong John Lu] bằng HTML và CSS – không thể thiếu sự tin tưởng vào chức năng in của trình duyệt. Trong trường hợp này, tôi đang sử dụng Makefile kiểu cũ tốt để tạo tệp PDF bằng phiên bản Chrome không đầu. [Thông tin thêm về điều đó ở dưới cùng của bài viết này. ]
Nhưng các trình duyệt muốn làm quen với trang của bạn trên đường tạo PDF. Với mục đích tốt nhất, họ thêm các lề bổ sung, điền vào chúng một số siêu dữ liệu mà bạn không muốn trên tài liệu đã tạo của mình và loại bỏ tất cả các màu nền. Tuyệt vời để in, nhưng không phải tất cả những gì bạn muốn trên bản PDF riêng của mình. Hãy xem ảnh chụp màn hình đối thoại In của Chrome bị cắt xén kém này
Hộp thoại In của Chrome [như xuất hiện trên máy Mac vào đầu năm 2021] đang hiển thị bản xem trước của Bách khoa toàn thư về Chế tác bản khắc gỗ của David Bull, với tất cả cài đặt được đặt thành mặc định
Trong số rất nhiều tùy chọn này, năm tùy chọn có thể được kiểm soát trực tiếp hoặc gián tiếp thông qua CSS. Bố cục, khổ giấy, Lề, Đầu trang và cuối trang và Đồ họa nền
Trong bài đăng này, tôi sẽ tập trung vào Chrome đơn giản vì tất cả các trình duyệt chính, công cụ in của nó đã tuân thủ các tiêu chuẩn web chặt chẽ hơn các trình duyệt khác trong ít nhất vài năm qua. Điều quan trọng là kể từ đầu năm 2021, các trình duyệt không dựa trên Chromium không cho phép chỉ định kích thước giấy tùy ý bằng CSS – đây là điều đầu tiên chúng tôi sẽ xem xét
Ở cuối bài đăng này, tôi cũng sẽ viết về các tính năng liên quan khác của CSS trong bối cảnh in, cộng với cách in sang PDF bằng Chrome không đầu
Đặt kích thước “giấy”
Bạn không nên ra lệnh cho khổ giấy trên bất kỳ trang web cũ nào – xét cho cùng, người dùng có thể có sở thích riêng của họ. Tuy nhiên, tính năng CSS này có ích khi đã biết kích thước giấy mong muốn, chẳng hạn như trong ngữ cảnh của markdeep-thesis nơi người dùng có thể định cấu hình nó trong mã nguồn hoặc cho các trang trình bày markdeep, trong đó bạn muốn chính xác một trang trình bày trên mỗi trang
Bên trong bộ chọn
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page {
/* Browser default, customizable by the user in the print dialogue. */
size: auto;
/* Default, but explicitly in portrait or landscape orientation and not user-
customizable. In my instance of Chrome, this is a vertical or horizontal letter
format, but you might find something different depending on your locale. */
size: portrait;
size: landscape;
/* Predefined format, can be coupled with an orientation. */
size: letter;
size: A4;
size: A4 landscape;
/* Custom, with same width and height. */
size: 10cm;
size: 420px;
size: 6in;
/* Different width and height. */
size: 640px 360px;
size: 20cm 15cm;
}
Theo caniuse. com, tính năng này chỉ hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera – cả Firefox và Safari đều không triển khai tính năng này
Bởi vì tôi biết bạn sẽ hỏi. Bạn có thể lồng bộ chọn
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Thêm hoặc xóa lề
Tương tự, điều này hữu ích nếu tài liệu của bạn đã chứa lề mà bạn muốn, trong trường hợp đó, bạn muốn loại bỏ bất kỳ lề bổ sung nào mà trình duyệt sẽ thêm vào. Là một lợi ích bổ sung, việc đặt lề thành 0 sẽ ẩn các dòng đầu trang và chân trang mặc định mà trình duyệt của bạn hiển thị trên mỗi trang – không có đủ dung lượng cho chúng
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Theo caniuse. com, tính năng này hoạt động trong các trình duyệt dựa trên Chromium như Chrome, Edge và Opera, cũng như trong Firefox và – tin hay không tùy bạn. – Internet Explorer, quay lại IE 8. Safari, trong khi đó, chưa bao giờ nghe nói về điều này
Nhưng xin chờ chút nữa. Bạn có thể nhắm mục tiêu trang đầu tiên của tài liệu của mình một cách riêng biệt bằng cách sử dụng lớp giả
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
Điều này có vẻ hơi lỗi thời – tại sao người ta lại cần các lề khác nhau trên các trang bên trái và bên phải? . e. , lề phải của trang bên trái và lề trái của trang bên phải] có hình thức giống nhau, sau khi được liên kết, với từng lề bên ngoài, điều này có thể yêu cầu các điều chỉnh mà các lớp giả này cho phép
Nếu bạn sử dụng các lớp giả này, Firefox sẽ không hiểu bạn nữa – tôi tin rằng bạn đang bắt đầu hiểu tại sao tôi lại thêm tuyên bố từ chối trách nhiệm chỉ hoạt động trong Chrome ở đầu bài viết này
Buộc màu nền
Tất cả các trình duyệt mặc định không in màu nền để tiết kiệm mực – rất hữu ích. Nếu thực sự cần, bạn có thể buộc bật lại nền trên cơ sở từng thành phần, chẳng hạn như đối với đoạn trích
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
code {
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
Chế độ
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Không có gì ngăn cản bạn sử dụng bộ chọn
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Theo caniuse. com, tính năng này được hiểu bởi tất cả các trình duyệt chính. vâng
Tại sao lại phải dựa vào chức năng in của trình duyệt khi có jsPDF và các thư viện tương tự?
Vì các tính năng CSS mà tôi đã thảo luận trong bài viết này phụ thuộc vào người dùng đang chạy các phiên bản hiện đại của các trình duyệt cụ thể, nên sẽ rất tuyệt nếu có khả năng tạo PDF [bất kể là để in hay chỉ để đọc ngoại tuyến] từ một
Có rất nhiều thư viện có mục đích thực hiện điều này, bao gồm cả jsPDF. Họ ít nhiều hoàn thành công việc bằng cách triển khai trình kết xuất HTML tùy chỉnh trong JavaScript – một nhiệm vụ khó khăn không có cơ hội tương thích hoàn toàn với các tiêu chuẩn web đang phát triển. phông chữ web và các tính năng CSS nâng cao có xu hướng giảm dần
Trừ khi tài liệu bạn đang cố gắng tạo PDF rất đơn giản, nếu không tài liệu đó sẽ trông không giống với trong trình duyệt – điều này không quá quan trọng trong nhiều ngữ cảnh, nhưng như bất kỳ người cầu toàn về bố cục và kiểu chữ nào cũng có thể chứng thực, là
phụ lục. Các tính năng CSS liền kề in khác
Trong khi viết bài viết này, tôi đã nghĩ đến hai tính năng CSS bổ sung không tương tác với cài đặt trong hộp thoại In của Chrome nhưng lại rất phù hợp khi thiết kế tài liệu có thể in được
gạch nối
Thuộc tính
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page {
/* Browser default, customizable by the user in the print dialogue. */
size: auto;
/* Default, but explicitly in portrait or landscape orientation and not user-
customizable. In my instance of Chrome, this is a vertical or horizontal letter
format, but you might find something different depending on your locale. */
size: portrait;
size: landscape;
/* Predefined format, can be coupled with an orientation. */
size: letter;
size: A4;
size: A4 landscape;
/* Custom, with same width and height. */
size: 10cm;
size: 420px;
size: 6in;
/* Different width and height. */
size: 640px 360px;
size: 20cm 15cm;
}
Giải thích chi tiết hơn về chức năng này và cách gợi ý thủ công tại các điểm ngắt dòng, cùng với ghi chú về hỗ trợ trình duyệt, có sẵn trên MDN. Điều khiển gạch nối nâng cao được thảo luận trong bài viết của Richard Rutter
Kiểm soát ngắt trang
Bạn có thể yêu cầu trình duyệt tránh phá vỡ một phần tử nhất định trên các trang [hoặc cột]. Ví dụ: bạn sẽ không muốn một
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
Đó là những gì tài sản của
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page {
/* Browser default, customizable by the user in the print dialogue. */
size: auto;
/* Default, but explicitly in portrait or landscape orientation and not user-
customizable. In my instance of Chrome, this is a vertical or horizontal letter
format, but you might find something different depending on your locale. */
size: portrait;
size: landscape;
/* Predefined format, can be coupled with an orientation. */
size: letter;
size: A4;
size: A4 landscape;
/* Custom, with same width and height. */
size: 10cm;
size: 420px;
size: 6in;
/* Different width and height. */
size: 640px 360px;
size: 20cm 15cm;
}
Thông tin chi tiết khác, bao gồm hỗ trợ trình duyệt, có sẵn trên MDN. Ngoài ra còn có các thuộc tính liên quan, nếu bí truyền hơn một chút,
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
phụ lục. In không đầu
Vì tôi thích Safari hơn Chrome để lướt web hàng ngày, nên khá bất tiện khi phải kích hoạt Chrome mỗi khi tôi muốn, chẳng hạn như tạo phiên bản PDF cho sơ yếu lý lịch của mình. May mắn thay, mọi phiên bản Chrome gần đây đều có thể chạy ở chế độ không đầu – tôi. e. , trên dòng lệnh và không cần mở GUI của nó
Điều này liên quan đến việc tìm ra vị trí mà tệp thực thi Chrome của bạn tồn tại – vị trí sẽ khác nhau giữa các nền tảng. Vì tôi đang dùng máy Mac nên bạn có thể tìm thấy của tôi tại
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Sau đó, để tạo tệp PDF
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page :first {
margin: auto 3cm;
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
@page {
/* No margin, hide the header and footer. */
margin: 0;
/* Some margin. Header and footer will be shown if the browser thinks there's
enough space [in my ad-hoc tests, anything larger than 8mm will trigger them]. */
margin: 1in;
/* Different margins vertically and horizontally. */
margin: 2cm 4cm;
/* Wildly different margins – the order matches the standard CSS margin property:
north, east, south, west. */
margin: 1cm 2cm 3cm 4cm;
/* You can also specify single margins only. */
margin-left: 20pt;
}
Cờ
code {
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
code {
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
code {
-webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
color-adjust: exact; /* Firefox */
}
Giá trị yêu thích của mọi kỹ sư cơ sở dữ liệu – nó không bao giờ gây ra bất kỳ rắc rối nào. ↩
Hoặc, dài dòng hơn. Trong quá trình vừa tốt nghiệp đại học, tôi thấy mình vừa tốt nghiệp vừa muốn sử dụng LaTeX cho mọi thứ – và chắc chắn bạn sẽ hiểu rằng một lập trình viên nghiêm túc không thể viết sơ yếu lý lịch của họ trong Google Docs. [Trên thực tế, một lập trình viên nghiêm túc sẽ hoàn toàn làm điều đó bởi vì họ quá bận viết các chương trình nghiêm túc để bận tâm đến các chi tiết nhỏ của định dạng sơ yếu lý lịch. ] ↩
Bạn sẽ nghĩ rằng nếu có cờ
3, thì cũng sẽ có cờ để định cấu hình các cài đặt còn lại thường xuất hiện trong hộp thoại In. Tuy nhiên, theo hiểu biết tốt nhất của tôi, không có. ↩code { -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */ color-adjust: exact; /* Firefox */ }Đó chỉ là một ước tính gần đúng của những gì xảy ra - ngân sách thời gian ảo thực sự phức tạp hơn thế một chút. ↩
Chúng tôi có thể áp dụng CSS cho trang để in không?
Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy . Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in.Tệp CSS in là gì?
Tệp, bản in. css là biểu định kiểu in và lệnh media="print" có nghĩa là tệp CSS này chỉ được gọi khi các trang web được in. [Có nhiều phương tiện khác nhau mà bạn có thể sử dụng cho biểu định kiểu, chẳng hạn như cho thiết bị cầm tay, TV, trình chiếu, v.v.