Hướng dẫn print page with css styles using javascript - in trang có kiểu css bằng javascript

Question

Đây có vẻ như là một giải pháp quá phức tạp cho một yêu cầu thực sự đơn giản, nhưng có lẽ có những chi tiết bạn đã bỏ qua câu hỏi.

Nội dung chính Show

Bản in phong cách
Kiểm tra đầu ra máy in
Xem thử bản in
Những công cụ phát triển
Hack thuộc tính phương tiện của bạn
Loại bỏ các phần không cần thiết
Tuyến tính hóa bố cục
Kiểu máy in
Áp dụng cột CSS
Sử dụng biên giới thay vì màu nền
Xóa hoặc đảo ngược hình ảnh
Thêm nội dung bổ sung
Trang phá vỡ trang
Điều này có thể được ưu tiên hơn để chỉ định ngắt trang, vì bạn có thể sử dụng càng ít giấy càng tốt trong khi tránh ngắt trang trong dữ liệu được nhóm như bảng hoặc hình ảnh:
Chúng ta có thể thêm các kiểu vào trang web bằng JavaScript không?
Bạn có thể tạo kiểu cho JavaScript với CSS không?
Tôi có thể đặt cài đặt in cửa sổ với JavaScript không?
@Media in CSS là gì?

Có vẻ như bạn bao gồm tệp CSS động chỉ cho mục đích in, nhưng CSS đã có một tính năng cho việc này. Tôi khuyên bạn nên loại bỏ tất cả JavaScript của bạn, và thay vào đó, hãy gói CSS của bạn trong một truy vấn truyền thông in, như vậy:print media query, like so:

@media print {
    p {
        display: inline-block;
    }

    /* the rest of your styles here */
}

Đơn giản chỉ cần bao gồm các kiểu in này với phần còn lại của CSS của trang của bạn và trình duyệt sẽ chăm sóc việc áp dụng chúng cho phương tiện in.print media.

Nếu bạn hoàn toàn phải làm điều này với JavaScript, bạn sẽ cần phải đợi cho đến khi bảng kiểu được tải xong. Bạn có thể làm điều đó bằng cách tạo phần tử, gắn trình nghe sự kiện cho sự kiện

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

9, sau đó thêm nó vào DOM.

Cái gì đó như:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

Sử dụng CSS nội tuyến trong JavaScript.

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

Ở đây divprint sử dụng CSS nội tuyến được viết trong Script Inside. Nó đang hoạt động một.

Bài viết này đã được cập nhật vào năm 2020 để phản ánh các thực tiễn tốt nhất mới nhất trong kiểu in CSS in.

Trong bài viết này, chúng tôi xem xét nghệ thuật tạo các trang web thân thiện với máy in với CSS.

"Ai in trang web?" Tôi nghe thấy bạn khóc! Tương đối ít trang sẽ được sao chép trên giấy. Nhưng hãy xem xét:

In vé du lịch hoặc buổi hòa nhạc
tái tạo các hướng dẫn hoặc thời gian biểu
Lưu một bản sao để đọc ngoại tuyến
truy cập thông tin trong một khu vực có kết nối kém
Sử dụng dữ liệu trong điều kiện nguy hiểm hoặc bẩn - ví dụ, nhà bếp hoặc nhà máy
xuất bản dự thảo nội dung cho các chú thích bằng văn bản
In biên lai web cho mục đích sổ sách kế toán
cung cấp tài liệu cho những người khuyết tật cảm thấy khó sử dụng màn hình
In một trang cho đồng nghiệp của bạn, người từ chối sử dụng những điều vô nghĩa mới của T hèN.

Thật không may, các trang in có thể là một trải nghiệm bực bội:

Văn bản có thể quá nhỏ, quá lớn hoặc quá mờ
Các cột có thể quá hẹp, quá rộng hoặc vượt trội
Các phần có thể bị cắt hoặc biến mất hoàn toàn
Mực bị lãng phí trên nền và hình ảnh màu không cần thiết
Liên kết URL có thể được nhìn thấy
Các biểu tượng, menu và quảng cáo được in không bao giờ có thể nhấp vào!

Nhiều nhà phát triển ủng hộ khả năng truy cập web, nhưng ít ai nhớ làm cho web được in có thể truy cập!

Chuyển đổi phản ứng, phương tiện truyền thông liên tục sang giấy phân trang ở bất kỳ kích thước và định hướng nào cũng có thể là thách thức. Tuy nhiên, kiểm soát in CSS đã có thể trong nhiều năm và một bảng kiểu cơ bản có thể được hoàn thành trong vòng vài giờ. Các phần sau đây mô tả các tùy chọn được hỗ trợ tốt và thực tế để làm cho các trang của bạn thân thiện với máy in.

Bản in phong cách

In CSS có thể là:

Áp dụng ngoài kiểu dáng màn hình. Lấy kiểu màn hình của bạn làm cơ sở, các kiểu máy in ghi đè lên các mặc định đó khi cần thiết. Taking your screen styles as a base, the printer styles override those defaults as necessary.
Áp dụng như các kiểu riêng biệt. Các kiểu màn hình và in hoàn toàn riêng biệt; Cả hai bắt đầu từ các kiểu mặc định của trình duyệt. The screen and print styles are entirely separate; both start from the browser’s default styles.

Sự lựa chọn sẽ phụ thuộc vào trang web/ứng dụng của bạn. Cá nhân, tôi sử dụng các kiểu màn hình làm cơ sở in hầu hết thời gian. Tuy nhiên, tôi đã sử dụng các bảng kiểu riêng cho các ứng dụng có đầu ra hoàn toàn khác nhau-chẳng hạn như hệ thống đặt phòng phiên hội nghị hiển thị lưới thời gian biểu trên màn hình nhưng lịch trình theo thời gian trên giấy.

Một bảng kiểu in có thể được thêm vào HTML

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

0 sau bảng kiểu tiêu chuẩn:

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

Các kiểu

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

1 sẽ được áp dụng ngoài các kiểu màn hình khi trang được in.addition to screen styles when the page is printed.

Để phân tách màn hình và phương tiện in,

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

2 chỉ nhắm mục tiêu màn hình:

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

Ngoài ra, các kiểu in có thể được bao gồm trong tệp CSS hiện có bằng các quy tắc

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

3. Ví dụ:

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

Bất kỳ số lượng quy tắc

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

4 nào cũng có thể được thêm vào, vì vậy điều này có thể thực tế để giữ các phong cách liên quan lại với nhau. Các quy tắc màn hình và in cũng có thể được phân tách nếu cần thiết:

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

Kiểm tra đầu ra máy in

Nó không cần thiết để giết cây và sử dụng mực đắt tiền mỗi khi bạn muốn kiểm tra bố cục in của mình! Các tùy chọn sau đây sao chép các kiểu in trên màn hình.

Xem thử bản in

Tùy chọn đáng tin cậy nhất là tùy chọn xem trước in trong trình duyệt của bạn. Điều này cho thấy cách phá vỡ trang sẽ được xử lý bằng cách sử dụng kích thước giấy mặc định của bạn.

Ngoài ra, bạn có thể lưu hoặc xem trước trang bằng cách xuất sang PDF.

Những công cụ phát triển

Các devtools (F12 hoặc CMD/Ctrl + Shift + I) có thể mô phỏng các kiểu in, mặc dù việc phá vỡ trang đã giành được.

Trong Chrome, hãy mở các công cụ nhà phát triển và chọn nhiều công cụ hơn, sau đó hiển thị từ menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi phương tiện mô phỏng CSS để in ở dưới cùng của bảng điều khiển đó.More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.

Trong Firefox, hãy mở các công cụ của nhà phát triển và nhấp vào biểu tượng mô phỏng phương tiện chuyển đổi trên ngăn Kiểu của Thanh tra Tab Tab:Toggle print media simulation icon on the Inspector tab’s style pane:

Hướng dẫn print page with css styles using javascript - in trang có kiểu css bằng javascript

Hack thuộc tính phương tiện của bạn

Giả sử bạn sử dụng thẻ

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

5 để tải máy in CSS, bạn có thể tạm thời thay đổi thuộc tính

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

6 thành

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

7:

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="screen" href="print.css" />

Một lần nữa, chiến thắng này tiết lộ trang bị phá vỡ. Don Tiết quên khôi phục thuộc tính thành

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

8 sau khi bạn hoàn thành thử nghiệm.

Loại bỏ các phần không cần thiết

Trước khi làm bất cứ điều gì khác, loại bỏ và thu gọn nội dung dự phòng với

function PrintPage()
{
   var sOption="toolbar=yes,location=no,directories=yes,menubar=yes,scrollbars=yes,width=900,height=300,left=100,top=25";
   var sWinHTML = document.getElementById('divPrint').innerHTML;
   var winprint=window.open("","",sOption);
       winprint.document.open();
       winprint.document.write('<html><head><style type="text/css">');
       winprint.document.write('body,td,th{font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#000000}');
       winprint.document.write('.style1 {font-size:11px; font-weight:bold; color:#000000; }');
       winprint.document.write('.style2 {font-size:11px; font-weight:bold; color:#FFFFFF; }');
       winprint.document.write('</style></head><body onload="window.print();">');
       winprint.document.write(sWinHTML);
       winprint.document.write('</body></html>');
       winprint.document.close();
       winprint.focus();
}

9. Các phần không cần thiết điển hình trên giấy có thể bao gồm các menu điều hướng, hình ảnh anh hùng, tiêu đề, chân trang, hình thức, thanh bên, tiện ích truyền thông xã hội và các khối quảng cáo (thường là bất cứ thứ gì trong

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

0):

/* print.css */
header, footer, aside, nav, form, iframe, .menu, .hero, .adslot {
  display: none;
}

Có thể cần phải sử dụng

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

1 nếu chức năng CSS hoặc JavaScript đang hiển thị các yếu tố theo trạng thái UI cụ thể. Sử dụng

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

2 là thông thường được khuyến nghị, nhưng chúng tôi có thể biện minh cho việc sử dụng nó trong một tập hợp các kiểu máy in cơ bản ghi đè mặc định màn hình.

Tuyến tính hóa bố cục

Tôi đau đớn khi nói điều này, nhưng Flexbox và Grid hiếm khi chơi độc đáo với bố cục máy in trong bất kỳ trình duyệt nào. Nếu bạn gặp phải vấn đề, hãy xem xét sử dụng

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

3 hoặc tương tự trên các hộp bố cục và điều chỉnh kích thước khi cần thiết. Ví dụ: đặt

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

4 để trải dài toàn bộ chiều rộng trang.Flexbox and Grid rarely play nicely with printer layouts in any browser. If you encounter issues, consider using

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

3 or similar on layout boxes and adjust dimensions as necessary. For example, set

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

4 to span the full page width.

Kiểu máy in

Kiểu dáng thân thiện với máy in bây giờ có thể được áp dụng. Khuyến nghị:

Đảm bảo bạn sử dụng văn bản tối trên nền trắng
Cân nhắc sử dụng phông chữ serif, có thể dễ đọc hơn

Điều chỉnh kích thước văn bản thành

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

5 trở lên

Sửa đổi mái chèo và lề khi cần thiết. Tiêu chuẩn

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

6,

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

7 hoặc

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

8 đơn vị có thể thực tế hơn.

Các đề xuất khác bao gồm

Áp dụng cột CSS

Tiêu chuẩn A4 và giấy thư Hoa Kỳ có thể dẫn đến các dòng văn bản dài hơn và không dễ đọc. Xem xét sử dụng các cột CSS trong bố cục in. Ví dụ:

/* print.css */
article {
  column-width: 17em;
  column-gap: 3em;
}

Trong ví dụ này, các cột sẽ được tạo ra khi có ít nhất

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

9 không gian ngang. Không cần thiết lập các truy vấn truyền thông; Các cột bổ sung sẽ được thêm vào trên giấy rộng hơn.

Sử dụng biên giới thay vì màu nền

Mẫu của bạn có thể có các phần hoặc hộp gọi ra biểu thị bằng các bảng màu tối hơn hoặc nghịch đảo:

Lưu mực bằng cách biểu diễn các yếu tố đó với đường viền:

Xóa hoặc đảo ngược hình ảnh

Người dùng sẽ không muốn in hình ảnh và hình nền trang trí và không thiết yếu. Bạn có thể xem xét một mặc định trong đó tất cả các hình ảnh được ẩn trừ khi chúng có lớp

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

0:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

0

Lý tưởng nhất, hình ảnh in nên sử dụng màu tối trên nền sáng. Có thể thay đổi màu SVG nhúng HTML trong CSS, nhưng sẽ có những tình huống bạn có bitmap tối hơn:

Một bộ lọc CSS có thể được sử dụng để đảo ngược và điều chỉnh màu sắc trong bảng kiểu in. Ví dụ:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

1

Kết quả:

Thêm nội dung bổ sung

Phương tiện in thường yêu cầu thêm thông tin không cần thiết trên màn hình. Thuộc tính CSS

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

1 có thể được sử dụng để nối văn bản vào

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

2 và

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

3 Các yếu tố giả. Ví dụ: hiển thị URL liên kết trong ngoặc sau văn bản:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

2

Hoặc bạn có thể thêm tin nhắn chỉ in:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

3

Đối với các tình huống phức tạp hơn, hãy xem xét sử dụng một lớp như

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

0 trên các phần tử chỉ có thể nhìn thấy khi được in,. Ví dụ:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

4

CSS:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

5

Lưu ý: Hầu hết các trình duyệt hiển thị URL và ngày/giờ hiện tại trên tiêu đề và/hoặc chân trang được in, do đó, hiếm khi cần phải tạo thông tin này trong mã.

Trang phá vỡ trang

Các thuộc tính CSS3

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

5 và

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

6 cho phép bạn kiểm soát cách thức phá vỡ trang, cột hoặc khu vực hoạt động trước và sau một phần tử. Hỗ trợ là tuyệt vời, nhưng các trình duyệt cũ hơn có thể sử dụng các thuộc tính

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

7 và

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

8 tương tự.

Các giá trị

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

5 và

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

6 sau đây có thể được sử dụng:

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

1: Mặc định - Break được cho phép nhưng không bị ép buộc

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

2: Tránh nghỉ trên trang, cột hoặc khu vực

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

3: Tránh ngắt trang

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

4: Buộc nghỉ trang

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

5: Bí danh của

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

4

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

7: Force Page Breaks để phần tiếp theo là trang bên trái

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

8: Force Page Breaks để phần tiếp theo là trang bên phải

Ví dụ: Buộc bị phá vỡ trang ngay trước bất kỳ tiêu đề

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

9 nào:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

6

Lưu ý: Hãy cảnh giác với việc phá vỡ trang quá mức. Lý tưởng nhất, đầu ra máy in nên sử dụng càng ít trang càng tốt.

Thuộc tính

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

0 (và

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

1 cũ hơn) chỉ định xem việc ngắt trang có được phép bên trong một phần tử hay không. Các giá trị được hỗ trợ thường được hỗ trợ:

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

1: Mặc định - Break được cho phép nhưng không bị ép buộc

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

2: Tránh nghỉ trên trang, cột hoặc khu vực

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

3: Tránh ngắt trang

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

4: Buộc nghỉ trang

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

7

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

5: Bí danh của

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

4top of a page. Imagine a block with five lines of text. The browser wants to make a page break after line four so the last line appears at the top of the next page. Setting

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6 breaks on or before line two so at least three lines carry over to the next page.

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

7: Force Page Breaks để phần tiếp theo là trang bên tráibottom of a page.

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

8: Force Page Breaks để phần tiếp theo là trang bên phải

Ví dụ: Buộc bị phá vỡ trang ngay trước bất kỳ tiêu đề

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

9 nào:

Lưu ý: Hãy cảnh giác với việc phá vỡ trang quá mức. Lý tưởng nhất, đầu ra máy in nên sử dụng càng ít trang càng tốt.

Thuộc tính

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

0 (và

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

1 cũ hơn) chỉ định xem việc ngắt trang có được phép bên trong một phần tử hay không. Các giá trị được hỗ trợ thường được hỗ trợ:

let styles = document.createElement('link');
styles.addEventListener('load', function(){
    window.print();
});
styles.setAttribute('rel', 'stylesheet');
styles.setAttribute('type', 'text/css');
styles.setAttribute('href', 'print.css');
document.head.appendChild(styles);

8

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

2: Tránh nghỉ bên trong nếu có thể

/* main.css */
body {
  margin: 2em;
  color: #fff;
  background-color: #000;
}

/* override styles when printing */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

3: Tránh ngắt trang bên trong khi có thể

Điều này có thể được ưu tiên hơn để chỉ định ngắt trang, vì bạn có thể sử dụng càng ít giấy càng tốt trong khi tránh ngắt trang trong dữ liệu được nhóm như bảng hoặc hình ảnh:

Thuộc tính

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

5 chỉ định số lượng dòng tối thiểu trong một khối phải được hiển thị ở đầu trang. Hãy tưởng tượng một khối với năm dòng văn bản. Trình duyệt muốn tạo một trang bị hỏng sau dòng bốn để dòng cuối cùng xuất hiện ở đầu trang tiếp theo. Cài đặt

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

6 bị hỏng hoặc trước dòng hai để ít nhất ba dòng chuyển sang trang tiếp theo.

Thuộc tính

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

7 tương tự như

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

5 ngoại trừ nó kiểm soát số lượng dòng tối thiểu để hiển thị ở dưới cùng của một trang.

Tài sản

/* main.css */

/* on-screen styles */
@media screen {

  body {
    margin: 2em;
    color: #fff;
    background-color: #000;
  }

}

/* print styles */
@media print {

  body {
    margin: 0;
    color: #000;
    background-color: #fff;
  }

}

9 kiểm soát phần tử biên giới trên các trang. Khi một phần tử có đường viền bị ngắt trang bên trong:

```
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="screen" href="print.css" />
```
0: Mặc định, chia bố cục. Đường viền trên cùng được hiển thị trên trang đầu tiên và đường viền dưới cùng được hiển thị trên trang thứ hai.
Các chi phí phát triển là tối thiểu.

Thêm một vài lần phá vỡ trang và xóa các phần không cần thiết sẽ làm hài lòng người dùng và nâng trang web của bạn lên trên các đối thủ cạnh tranh. Thêm nó vào danh sách việc cần làm của bạn!

Để biết kiến thức CSS nâng cao hơn, hãy đọc cuốn sách của chúng tôi, CSS Master, Phiên bản thứ 2.

Chúng ta có thể thêm các kiểu vào trang web bằng JavaScript không?

Bằng cách sử dụng các phương thức DOM JavaScript, bạn có thể thêm các kiểu nội tuyến hoặc kiểu toàn cầu vào phần tử..

Bạn có thể tạo kiểu cho JavaScript với CSS không?

JavaScript có thể tương tác với các kiểu dáng, cho phép bạn viết các chương trình thay đổi kiểu của tài liệu một cách linh hoạt.Có ba cách để làm điều này: bằng cách làm việc với danh sách các kiểu dáng của tài liệu, ví dụ: thêm, xóa hoặc sửa đổi bảng kiểu., allowing you to write programs that change a document's style dynamically. There are three ways to do this: By working with the document's list of stylesheets—for example: adding, removing or modifying a stylesheet.

Tôi có thể đặt cài đặt in cửa sổ với JavaScript không?

Cửa sổ.Phương thức print () gọi bản dựng của trình duyệt trong plugin hỗ trợ in để in trang DOM hiện tại.Bạn có thể kiểm tra tài liệu, nó không hỗ trợ bất kỳ đối số hoặc cài đặt nào.Để thiết lập bản in, bạn chỉ có thể sử dụng GUI của trình duyệt (ví dụ: bật hoặc tắt đồ họa nền, v.v.)to setup the print, you can only utilize the browser's GUI( ex. enable or disable background graphics etc.)

@Media in CSS là gì?

Các CSS AT-Rule có thể được sử dụng để áp dụng một phần của bảng kiểu dựa trên kết quả của một hoặc nhiều truy vấn truyền thông.Với nó, bạn chỉ định một truy vấn phương tiện và một khối CSS để áp dụng cho tài liệu khi và chỉ khi truy vấn phương tiện khớp với thiết bị mà nội dung đang được sử dụng.. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

programming javascript JavaScript media print Display print CSS HTML print page

Hướng dẫn print page with css styles using javascript - in trang có kiểu css bằng javascript

Bản in phong cách

Kiểm tra đầu ra máy in

Xem thử bản in

Những công cụ phát triển

Hack thuộc tính phương tiện của bạn

Loại bỏ các phần không cần thiết

Tuyến tính hóa bố cục

Kiểu máy in

Áp dụng cột CSS

Sử dụng biên giới thay vì màu nền

Xóa hoặc đảo ngược hình ảnh

Thêm nội dung bổ sung

Trang phá vỡ trang

Điều này có thể được ưu tiên hơn để chỉ định ngắt trang, vì bạn có thể sử dụng càng ít giấy càng tốt trong khi tránh ngắt trang trong dữ liệu được nhóm như bảng hoặc hình ảnh:

Chúng ta có thể thêm các kiểu vào trang web bằng JavaScript không?

Bạn có thể tạo kiểu cho JavaScript với CSS không?

Tôi có thể đặt cài đặt in cửa sổ với JavaScript không?

@Media in CSS là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội