2011-11-08 23 views
7

Trong ứng dụng web của chúng tôi, chúng tôi có chức năng in cho một vài trang của chúng tôi và cách tiếp cận chúng tôi thực hiện là đưa nội dung của trang hiện tại vào khung nội tuyến sẵn có trên toàn cầu tài liệu và in iframe (sử dụng Javascript). Điều này hoạt động hoàn toàn tốt trong Firefox nhưng trong IE nó in các khung nội tuyến trong một phông chữ rất nhỏ, gần như không đọc được.iframe.print so với window.print trên IE - phông chữ nhỏ ở đây

Tất cả CSS được áp dụng trong cả hai trình duyệt đều giống nhau, tôi đảm bảo rằng HTML được in không bị tràn theo bất kỳ cách nào (làm cho IE phù hợp với nội dung hoặc thứ gì đó) ... và in IE vẫn còn rất nhỏ. Thật thú vị, nếu tôi thay đổi logic in để ghi vào một cửa sổ mới và sau đó làm window.print(), mọi thứ hoạt động tốt trong IE cũng như phông chữ lớn như yêu cầu/được chỉ định bởi CSS.

Có ai gặp phải sự cố tương tự với iframe.print() trong IE không?

Cảm ơn sự giúp đỡ.

Nitin

+0

Bạn có bất kỳ CSS cụ thể nào để in không? –

+0

Không có nó ban đầu nhưng tôi tạo ra một mà không cần bất kỳ sự giúp đỡ. Ngay cả với CSS in CSS cụ thể, in khung nội tuyến bằng phông chữ nhỏ. – legendofawesomeness

Trả lời

0

giải pháp cuối cùng mà tôi áp dụng là sử dụng window.print() thay vì iframe.print().

1

Vâng, chúng tôi cũng thấy điều tương tự. Nếu chúng tôi mở cùng một trang trực tiếp, nó sẽ in như bạn mong đợi. Khi nó được tải trong một khung nội tuyến và in nó làm cho mọi thứ nhỏ hơn; không chỉ là phông chữ.

này được sử dụng IE9 trên Windows 7.

4

Tôi đã tìm thấy chuỗi này sau khi vật lộn với cùng một vấn đề. Dường như hành vi này vẫn tồn tại ngay cả trong IE11. Tin tốt là tôi đã có thể tìm thấy một giải pháp mà không cần phải mở một cửa sổ mới và sau đó gọi số window.print().

Bí quyết là sử dụng document.execCommand trong IE (hoạt động tất cả các cách lên đến IE11) và quay trở lại một cách duyên dáng thành iframe.print() trong các trình duyệt khác. Các giải pháp hoàn chỉnh có thể giống như thế này (sử dụng jQuery để chọn một khung nội tuyến, nhưng điều đó hoàn toàn không bắt buộc):

var target = $('iframe')[0]; 
try { 
    target.contentWindow.document.execCommand('print', false, null); 
} catch(e) { 
    target.contentWindow.print(); 
} 

Giải pháp này được lấy cảm hứng từ một chủ đề rất cũ về IE7 từ đây: http://bytes.com/topic/misc/answers/629926-ie7-printing-iframe-solution. Nó vẫn còn có liên quan, mặc dù.

+0

Điều này không hiệu quả đối với tôi trên IE 11.0.9600.16659. Kích thước phông chữ vẫn còn nhỏ khi cố gắng in nội dung của khung nội tuyến. – justanotherprogrammer

+1

Từ một bên không có lập trình, khi tôi đi đến cài đặt -> in -> thiết lập trang và bỏ chọn hộp 'Bật Thu nhỏ để phù hợp', kích thước văn bản trở về kích thước bình thường. – justanotherprogrammer

+0

Giải pháp không hoạt động trong Firefox. Xem [contentWindow.document.execCommand ('print', false, null) không hoạt động trong firefox] (http://stackoverflow.com/questions/25323371/contentwindow-document-execcommandprint-false-null-not-working-in-firefox). Tôi đã thực hiện các lỗi của giải pháp thử nghiệm trong Chrome và IE và nó giải quyết vấn đề này nhưng tôi đã không tìm hiểu về phá vỡ FF cho đến khi tôi phát hành mã để sản xuất. Tôi ngớ ngẩn quá. – Karl

0

Khi "Heston Liebowitz" viết, việc sử dụng "execCommand" là một ý tưởng hay và giải pháp tốt. Nhưng tôi sẽ đặt điều kiện if cho IE, bởi vì vấn đề này chỉ xuất hiện trong trường hợp của IE. Dưới đây là gợi ý của tôi:

// Get the iframe element 
var oIFrame = $('#iF_Print').get(0); 
// Fix for IE : Allow it to render the iframe 
oIFrame.focus(); 

var bMS_IE = false; 
// Verify whether the browser is Internet Explorer (IE8,IE9,IE10 -> "msie", but for IE11 the name is changed into "trident"). 
var userAgent = window.navigator.userAgent.toLowerCase(); 
bMS_IE = ((userAgent.indexOf('msie ') > -1) || (userAgent.indexOf("trident/") > -1))?true:false; 

if (bMS_IE) { 
     try { 
      oIFrame.document.execCommand('print', false, null); 
     }catch(e) { 
      window.print(); 
     } 
}else { 
    oIFrame.print(); 
} 
3

Được có in nhỏ về vấn đề IE ngày hôm nay, và để sửa chữa tôi chỉ đơn giản là điều chỉnh chức năng in của tôi như vậy:

$(document).ready(function(){ 
$("#printFrame").click(function(){  
    if (document.queryCommandSupported('print')) 
    { 
     $("#iframe").get(0).contentWindow.document.execCommand('print', false, null); 
    } 
    else 
    { 
     $("#iframe").get(0).contentWindow.focus(); 
     $("#iframe").get(0).contentWindow.print(); 
    } 
    }); 
}); 

Bây giờ có vẻ như để in ra giống nhau trên IE, Chrome và Firefox. Được đăng ở đây vì giải pháp này là khó khăn cho tôi để tìm, vì vậy hy vọng điều này sẽ giúp một ai đó.

Các vấn đề liên quan