Biểu định kiểu in là gì?

Có thể đôi khi trang web hoặc ứng dụng của bạn muốn cải thiện trải nghiệm của người dùng khi in nội dung. Có một số tình huống có thể xảy ra

  • Bạn muốn điều chỉnh bố cục để tận dụng kích thước và hình dạng của tờ giấy
  • Bạn muốn sử dụng các phong cách khác nhau để tăng cường sự xuất hiện của nội dung của bạn trên giấy
  • Bạn muốn sử dụng hình ảnh có độ phân giải cao hơn để có kết quả tốt hơn
  • Bạn muốn điều chỉnh trải nghiệm in của người dùng, chẳng hạn như trình bày phiên bản nội dung có định dạng đặc biệt trước khi bắt đầu in

Có thể có những trường hợp khác mà bạn muốn quản lý quy trình in, nhưng đây là một số trường hợp phổ biến nhất. Bài viết này cung cấp các mẹo và kỹ thuật để giúp nội dung web của bạn được in tốt hơn

Sử dụng biểu định kiểu in

Thêm phần sau vào thẻ của bạn

<link href="/path/to/print.css" media="print" rel="stylesheet" />

Sử dụng truy vấn phương tiện để cải thiện bố cục

Phát hiện yêu cầu in

Trình duyệt gửi các sự kiện beforeprintafterprint để cho phép nội dung xác định thời điểm in có thể xảy ra. Bạn có thể sử dụng điều này để điều chỉnh giao diện người dùng được trình bày trong quá trình in (chẳng hạn như bằng cách hiển thị hoặc ẩn các thành phần giao diện người dùng trong quá trình in)

ví dụ

Dưới đây là một số ví dụ phổ biến

Mở và tự động đóng cửa sổ bật lên khi hoàn tất

Nếu bạn muốn có thể tự động đóng cửa sổ bật lên (ví dụ: phiên bản tài liệu thân thiện với máy in) sau khi người dùng in nội dung của nó, bạn có thể sử dụng mã như sau

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JavaScript Window Close Exampletitle>
    <script>
      function popuponclick() {
        const my_window = window.open(
          "",
          "mywindow",
          "status=1,width=350,height=150"
        );
        my_window.document.write("Print Me");
        my_window.document.write('');
        my_window.document.write(
          "

When you print this window, it will close afterward.

"
); my_window.document.write(""); }
script> head> <body> <p> To try out the <code>afterprintcode> event, click the link below to open the window to print. You can also try changing the code to use <code>beforeprintcode> to see the difference. p> <p><a href="javascript: popuponclick()">Open Popup Windowa>p> body> html>

Xem ví dụ trực tiếp

In một trang bên ngoài mà không cần mở nó

Nếu bạn muốn có thể in một trang bên ngoài mà không cần mở nó, bạn có thể sử dụng một