2012-11-28 39 views
6

Tôi đang sử dụng in trong dự án của mình (Sử dụng HTML và javascript). Trong mozilla onbeforeprint và onafterprint đang hoạt động đúng nhưng không hoạt động trong chrome.onbeforeprint và onafterprint không hoạt động trong Chrome và IE?

+1

Chrome [dường như không hỗ trợ cho các sự kiện này] (https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint#Browser_compatibility). – pimvdb

+0

@pimvdb Vậy làm thế nào tôi có thể đạt được những sự kiện này trong chrome. Có sự kiện tương đương nào cho chrome hay không. –

Trả lời

1

Chrome doesn't have onbeforeprint.

Các phương pháp ưa thích để làm điều này là sử dụng print media specific stylesheets.

Nếu bạn hoàn toàn phải phát hiện Print operations with javascript cross browser, điều này có vẻ đầy hứa hẹn, nhưng tôi chưa tự mình thử.

+0

điều này đã cứu mạng tôi, cảm ơn Ryan. Tôi đã sử dụng @media print {...} để in trang, nhưng bằng cách nào đó css đã bị bỏ qua, vì vậy tôi phải thông qua cách js. điều này làm việc như một sự quyến rũ đối với tôi. –

-1

Trong Chrome không hoạt động trước khi in & onAfterPrint.

Nhưng bạn có thể giới hạn trang in bằng cách sử dụng css phương tiện in

Ví dụ

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

css này được bao gồm trong phần đầu của trang.

phong cách Các css có sau

#header, #menu, #entry-content, .noprint {display: none;} 
9

gì làm việc cho Chrome là để kiểm tra cho 'matchmedia' trong 'cửa sổ' như trong:

   if ('matchMedia' in window) { 
        window.matchMedia('print').addListener(function (media) { 
        //do before-printing stuff 
        }); 
       } else { 
        window.onbeforeprint = function() { 
        //do before-printing stuff 
        } 
       } 
+2

Trình nghe có vẻ được kích hoạt hai lần khi tài liệu được in (sử dụng addListener). Đối số truyền thông dường như không khác nhiều trong hai cuộc gọi đó, ngoại trừ dấu thời gian ... –

+2

media.match sẽ là 'true' trước khi in và sau đó là false. – sabof

1

Chrome không hỗ trợ những sự kiện đó. Thay vào đó, nó hỗ trợ 'window.matchMedia'. Ngoài ra còn có một bug in Chrome ngăn nó in tất cả các trang. Vì lý do này, tôi khuyên bạn nên thêm nút in vào trang web của bạn và yêu cầu người dùng sử dụng nút thay vì in qua menu Chrome.

var beforePrint = function() { 
    console.log("before"); 
}; 
var afterPrint = function() { 
    console.log("after"); 
}; 

var launchedFromMenu = true; 
if (window.matchMedia) { 
    var mediaQueryList = window.matchMedia('print'); 
    mediaQueryList.addListener(function(mql) { 
     if (mql.matches) { 
      if(launchedFromMenu) { 
       // https://bugs.chromium.org/p/chromium/issues/detail?id=571070 
       alert("There is a bug in Chrome/Opera and printing via the main menu does not work properly. Please use the 'print' icon on the page."); 
      } 
      beforePrint(); 
     } else { 
      afterPrint(); 
     } 
    }); 
} 

// These are for Firefox 
window.onbeforeprint = beforePrint; 
window.onafterprint = afterPrint; 

function printPage() { 
    window["beforePrint"](); 
    launchedFromMenu = false; 
    window.print(); 

} 
0

Cập nhật nhanh chóng, bởi vì sự ủng hộ của các sự kiện in ấn has improved a lot

  • Chrome 63, phát hành trong tháng 12 năm 2017, hỗ trợ nó source
  • Opera 50 cũng
  • Cạnh hỗ trợ nó kể từ đầu
  • thậm chí phiên bản cũ 6 của IE (6 !!) hỗ trợ nó
Các vấn đề liên quan