181

Tôi đã thấy câu hỏi này được hỏi theo một vài cách khác nhau trên SO và một số trang web khác, nhưng hầu hết chúng đều quá cụ thể hoặc lỗi thời. Tôi hy vọng ai đó có thể cung cấp một câu trả lời dứt khoát ở đây mà không gây khó khăn cho đầu cơ.

Có cách nào, bằng CSS hoặc javascript, để thay đổi cài đặt máy in mặc định khi ai đó in trong trình duyệt của họ không? Và tất nhiên bằng cách "in từ trình duyệt của họ", ý tôi là một số dạng HTML, không phải PDF hoặc một số loại mime phụ thuộc bổ trợ khác.

Xin lưu ý:

Nếu một số trình duyệt cung cấp điều này và những trình duyệt khác thì không (hoặc nếu bạn chỉ biết cách làm điều đó cho một số trình duyệt), tôi hoan nghênh các giải pháp dành riêng cho trình duyệt.

Tương tự, nếu bạn biết về một trình duyệt chính có các hạn chế cụ thể đối với EVER làm điều này, điều đó cũng hữu ích, nhưng một số tài liệu khá cập nhật sẽ được đánh giá cao. (nói đơn giản là "đi ngược lại chính sách bảo mật của XYZ" không thuyết phục lắm khi XYZ đã thực hiện những thay đổi đáng kể trong chính sách nói trên trong ba năm qua).

Cuối cùng, khi tôi nói "thay đổi cài đặt in mặc định" tôi không có nghĩa là mãi mãi, chỉ dành cho trang của tôi và tôi đặc biệt đề cập đến việc in lề, tiêu đề và chân trang.

Tôi rất biết rằng CSS cung cấp tùy chọn thay đổi hướng trang cũng như lề trang. Một trong nhiều cuộc đấu tranh là với Firefox. Nếu tôi đặt lề trang thành 1 inch, thì ADDS này sẽ bằng nửa inch mà nó đã đặt đúng chỗ.

Tôi rất muốn giảm việc sử dụng các tệp PDF trên trang web của khách hàng của tôi, nhưng việc vi phạm về trình bày (cũng như thiếu độ tin cậy) là mối quan tâm chính của họ.

— Anthony
nguồn

Có bất kỳ lý do cụ thể tại sao bạn muốn làm như vậy? Nếu bạn nói yêu cầu, thì có lẽ có thể có một giải pháp khả thi khác ... Đối với tôi, việc thay đổi cài đặt người dùng không giống như một giải pháp hay ...

— Nivas

1

Tôi đồng ý. Tôi không muốn thay đổi cài đặt người dùng. Tôi muốn ghi đè cài đặt mặc định của trình duyệt. Và lý do là vì giải pháp thay thế là sử dụng PDF, điều này dường như không cần thiết khi mọi thứ khác có thể được làm cho thân thiện với máy in thông qua CSS.

— Anthony

Tôi thấy bạn đã kiểm tra câu trả lời là giải pháp, nhưng nó chỉ hoạt động trong chrome. Bạn đã có thể có được một giải pháp chính xác trình duyệt chéo? hoặc ít nhất là trong một vài trình duyệt? bởi vì tôi có cùng một vấn đề

— mavili

@mavili xem stackoverflow.com/a/23778125/453605 để biết giải pháp đa trình duyệt.

— Marcello Nuccio

199

Tiêu chuẩn CSS cho phép một số định dạng nâng cao. Có một lệnh @pagetrong CSS cho phép một số định dạng chỉ áp dụng cho phương tiện phân trang (như giấy). Xem http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Nhược điểm là hành vi trong các trình duyệt khác nhau là không phù hợp. Safari vẫn không hỗ trợ cài đặt lề trang máy in, nhưng tất cả các trình duyệt chính khác hiện hỗ trợ nó.

Với @pagechỉ thị, bạn có thể chỉ định lề máy in của trang (không giống với lề CSS thông thường của phần tử HTML):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Lưu ý rằng về cơ bản chúng tôi sẽ vô hiệu hóa các lề cụ thể của trang ở đây để đạt được hiệu quả của việc loại bỏ đầu trang và chân trang, do đó, lề chúng tôi đặt trên thân sẽ không được sử dụng trong các ngắt trang (như nhận xét của Konrad ) Điều này có nghĩa là nó sẽ chỉ hoạt động đúng nếu nội dung in chỉ là một trang.

Điều này không hoạt động trong Firefox 3.6 , IE 7 , Safari 5.1.7 hoặc Google Chrome 4.1 .

Đặt lề @page có hiệu lực trong IE 8 , Opera 10 , Google Chrome 21 và Firefox 19 .
Mặc dù lề trang được đặt chính xác cho nội dung của bạn trong các trình duyệt này, hành vi không lý tưởng trong việc cố gắng giải quyết việc ẩn tiêu đề / chân trang.

Đây là cách nó hoạt động trong các trình duyệt khác nhau:

Trong Internet Explorer , lề thực sự được đặt thành 0mm trong cài đặt cho lần in này và nếu bạn thực hiện Xem trước, bạn sẽ nhận được 0mm làm mặc định, nhưng người dùng có thể thay đổi nó trong bản xem trước.
Bạn sẽ thấy rằng nội dung trang thực sự được định vị chính xác, nhưng tiêu đề và chân trang in của trình duyệt được hiển thị với nền không trong suốt và do đó ẩn nội dung trang ở vị trí đó một cách hiệu quả.
Trong Firefox phiên bản mới hơn, nó được định vị chính xác, nhưng cả văn bản nội dung và chân trang đều được hiển thị, do đó, nó trông giống như một sự pha trộn xấu của văn bản tiêu đề trình duyệt và nội dung trang của bạn.
Trong Opera , nội dung trang ẩn tiêu đề khi sử dụng nền không trong suốt trong css tiêu chuẩn và vị trí đầu trang / chân trang xung đột với nội dung. Khá tốt, nhưng có vẻ lạ nếu lề được đặt thành một giá trị nhỏ làm cho tiêu đề được hiển thị một phần. Ngoài ra lề trang không được đặt đúng.
Trong các phiên bản Chrome mới hơn, đầu trang và chân trang của trình duyệt bị ẩn nếu lề @page được đặt quá nhỏ để vị trí đầu trang / chân trang xung đột với nội dung. Theo tôi, đây chính xác là cách hành xử này.

Vì vậy, kết luận là Chrome có triển khai tốt nhất về vấn đề này để ẩn tiêu đề / chân trang.

— kính sợ
nguồn

1

Để làm rõ, điều này dường như không loại bỏ các tiêu đề bằng Firefox 21 hoặc IE10, mặc dù tôi nghi ngờ nó đã khiến tiêu đề / chân trang không chiếm dung lượng. Nó hoạt động với Chrome 28.

— amh15

2

Tôi đã cập nhật để phản ánh các phiên bản trình duyệt mới hơn. Chrome hiện đã triển khai tốt nhất việc này.

— kinh ngạc

@SearchForKnowledge: Vâng, như tôi đã nói - nếu bạn đọc câu trả lời của tôi dưới phần mô tả về cách nó hoạt động trong IE: "Bạn sẽ thấy nội dung trang thực sự được định vị chính xác, nhưng tiêu đề và chân trang in của trình duyệt đang ẩn trang nội dung ở vị trí đó. " Tôi nói nó "có hiệu lực" trong IE 8, không phải nó hoạt động như chúng ta muốn ... Tôi sẽ chỉnh sửa câu trả lời của mình để làm cho điều này rõ ràng hơn.

— kinh ngạc

Loại bỏ các tiêu đề, nhưng cũng có dấu hiệu bên trái. Vì vậy, tất cả các văn bản của tôi là trên các cạnh của trang bây giờ.

— Mittchel

7

Giải pháp này chỉ đơn giản là không làm việc ở tất cả , bởi vì @pagelợi nhuận và bodylợi nhuận về cơ bản mọi thứ khác nhau: bodylợi nhuận chỉ áp dụng cho toàn bộ cơ thể , tức là phía trên cùng của trang đầu tiên và dưới cùng của trang cuối cùng. Đối với tất cả các trang trung gian, trên cùng / dưới cùng sẽ vẫn có lề không.

— Konrad Rudolph

86

Mọi phiên bản gần đây của Chrome và Opera, cũng như Firefox 48 alpha 1 trở lên

Bạn có thể đặt lề trang thành một kích thước quá nhỏ để chứa văn bản để vô hiệu hóa điều này (mượn từ câu trả lời của awe ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

Mở rộng đoạn trích

Đối với các phiên bản Firefox lên tới 48 alpha 1

Bạn có thể thêm một mozNoMarginBoxesthuộc tính vào <html>thẻ để ngăn URL, số trang và những thứ khác Firefox thêm vào lề trang không được in.

Nó đang hoạt động trong Firefox 29 trở đi. Bạn có thể xem ảnh chụp màn hình về sự khác biệt ở đây hoặc xem ví dụ trực tiếp tại đây.

Lưu ý rằng mozDisallowSelectionPrintthuộc tính trong ví dụ là không bắt buộc để xóa văn bản khỏi lề; xem thuộc tính mozdisallowselectionprint trong PDF.js làm gì? .

Các trình duyệt khác

Thật không may, dường như không có cách nào để giải quyết vấn đề này trong Internet Explorer, vì vậy bạn sẽ phải dùng đến PDF hoặc yêu cầu người dùng tắt văn bản lề.

Điều tương tự cũng xảy ra với Safari; theo nhận xét của @Luiz Perez , các phiên bản gần đây nhất của Safari (8, 9.1 và 10) vẫn không hỗ trợ @pagecho việc loại bỏ văn bản lề.

Tôi không thể tìm thấy bất cứ điều gì trên Edge và tôi không có sẵn bản cài đặt Windows 10 để kiểm tra.

— người dùng2428118
nguồn

5

Thành thật mà nói, tôi đồng tình với điều này. Nó thậm chí hoạt động trong Chrome nếu bạn in bằng "Hộp thoại hệ thống". chỉ cần chắc chắn rằng nó <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>được thiết lập Nguồn:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

— Peter

3

Hoạt động tốt trên Firefox. Vì vậy, điều này cùng với @page{ size: auto; margin: 3mm; } việc hỗ trợ chrome và safari đã làm một giải pháp trình duyệt chéo cho tôi.

— Clain Dsilva

Giải pháp này hoạt động thực sự tốt để loại bỏ thông tin / nội dung không mong muốn trong các tài liệu in trong FF. Cảm ơn!

— Varvara Jones

Điều này thật tuyệt, nhưng còn IE thì sao?

— Santosh

1

Tôi đã thử đoạn trích này trên Safari 8, 9.1 và 10 và nó không xóa phần đầu trang hoặc chân trang trong các phiên bản Safari đó.

— Luis Perez

21

Như @Awe đã nói ở trên, đây là giải pháp, được xác nhận là hoạt động trong Chrome !!

Chỉ cần đảm bảo rằng đây là bên trong các thẻ đầu:

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

— Làm
nguồn

3

Đây là một giải pháp rất tốt! Loại bỏ các lề và loại bỏ các tiêu đề và chân trang. Thay đổi duy nhất của tôi là sau đó thêm padding: 0.25in 0.5in;vào các kiểu cơ thể để tôi có các lề chính xác mà tôi cần cho một bản in đẹp, sạch. Hoạt động trong Chrome v25 và rất may cho dự án cụ thể này, chúng tôi có thể yêu cầu người dùng cuối chọn từ một vài trình duyệt hiện đại.

— Charlie Schliesser

2

Thật không may, điều này gây ra vấn đề với bản in nhiều trang. Văn bản ở dưới cùng của trang được cắt bớt.

— Jonathan

Hoạt động hoàn hảo trên Chrome 67.0.3394.99 và Firefox 62.0b5 với đầu ra trang duy nhất.

— killscreen

16

Tôi có một yêu cầu tương tự từ một khách hàng muốn xóa tiêu đề, số trang và chân trang html. Trong trường hợp này, khách hàng đang trình bày một trang HTML có thể tăng gấp đôi như một chứng chỉ chính thức. URL, trang và tiêu đề được thêm vào không liên quan và dẫn đến một sản phẩm cuối cùng ít được làm hài lòng. Trong một số cách, nó chỉ trông rẻ tiền.

Media = Print không thể tắt các mặc định của trình duyệt này. Cách giải quyết duy nhất là yêu cầu người dùng nhấp vào nút "Bánh răng" và bật / tắt các mục đó. Nghiêm túc mà nói, tôi không biết mình có thể làm điều đó trong 20 năm (và chúng tôi nghĩ rằng người dùng thông thường sẽ có manh mối để nhấp vào nút chuyển đổi?).

Nếu CSS hỗ trợ Media = Print, nó sẽ hỗ trợ khả năng kiểm soát toàn bộ trải nghiệm in của người dùng cuối. Tôi đánh giá cao rằng các trình duyệt cung cấp các trường được thêm vào, nhưng, tại sao không cho phép CSS kiểm soát trải nghiệm in tổng thể - nếu đó là điều mong muốn. Một giải pháp 90% có thể là 100% với ba lĩnh vực nữa! Một đơn giản:

#BrowserPrintDefaults{display:none}

sẽ đủ.

Một lần nữa, người dùng cuối có muốn in nó ra hay không (có thể khách hàng của bạn rất riêng tư và không muốn các URL được in nổi xung quanh. Hoặc có thể nhóm điều hành sử dụng trang web cộng tác riêng tư?). Vui mừng bảo vệ người dùng cuối, nhưng nếu ai đó đang tìm kiếm câu trả lời, đừng trả lời rằng đó là quyền của người dùng cuối hiển thị hoặc ẩn. Đôi khi, đó là quyền của khách hàng thanh toán hóa đơn.

— CAL
nguồn

Cuối cùng tôi đã từ bỏ, nhiều như tôi không muốn. Tôi chắc chắn đồng ý rằng điều này sẽ được phơi bày trong CSS, vì tất cả các trình duyệt đều có các cài đặt này và nó là một yếu tố trình bày. Nhưng thay vào đó, đây là cảnh như một ưu tiên cấp ứng dụng, như tắt cookie.

— Anthony

1

Đây là một tiêu chuẩn CSS chính thức sử dụng @Pagechỉ thị để đặt lề máy in (không giống với lề cơ thể của trang html). Hiện tại điều này được hỗ trợ bởi tất cả các trình duyệt chính trừ Safari, nhưng cách nó ảnh hưởng đến tiêu đề / chân trang khác nhau. Các triển khai tốt nhất là trong Opera và Chrome.

— kinh ngạc

6

Hãy thử mã này, hoạt động 100% cho tôi:
CHO Cảnh:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

ĐỐI VỚI Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

— Cậu bé Iyes
nguồn

1

Các quy tắc trang CSS sẽ đặt lề, nhưng không xóa phần đầu trang và chân trang dựng sẵn được đặt bởi trình duyệt (URL trang, số trang, v.v.)

— Anthony

0

Vì bạn đã đề cập "trong trình duyệt của họ" và firefox, nếu bạn đang sử dụng Internet Explorer, bạn có thể vô hiệu hóa đầu trang / chân trang bằng cách tạm thời đặt giá trị trong sổ đăng ký, xem ví dụ ở đây . AFAIK Tôi chưa nghe nói về cách làm điều này trong các trình duyệt khác. Cả hai câu trả lời của Daniel và Mickel dường như va chạm với nhau, tôi đoán rằng có thể có một cài đặt tương tự ở đâu đó trong sổ đăng ký cho firefox để xóa tiêu đề / chân trang hoặc tùy chỉnh chúng. Bạn đã kiểm tra nó chưa?

Hy vọng điều này sẽ giúp và ngày lễ vui vẻ, Trân trọng, Tom.

— t0mm13b
nguồn

1

Trong IE7 +, bạn có thể tắt đầu trang / chân trang bằng một nút bấm đơn giản trong Xem trước bản in. Không cần phải làm điều đó trong registry!

— kinh ngạc

0

@page lề: 0mm hiện hoạt động trong Firefox 19.0a2 (2012-12-07).

— thinsoldier
nguồn

0

Tôi đã giải quyết vấn đề của mình bằng cách sử dụng một số css vào trang web.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

— Kabir Hossain
nguồn

0

Điều này làm việc cho tôi với khoảng 1cm lề

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

— afshin
nguồn

Vô hiệu hóa tùy chọn in trình duyệt (tiêu đề, chân trang, lề) từ trang?

Đây là cách nó hoạt động trong các trình duyệt khác nhau:

Mọi phiên bản gần đây của Chrome và Opera, cũng như Firefox 48 alpha 1 trở lên

Đối với các phiên bản Firefox lên tới 48 alpha 1

Các trình duyệt khác