Cách ghi đè in trình duyệt chuẩn và in khung nội tuyến theo mặc định

Tôi có trang loại tài liệu với khung nội tuyến bên trong. Tôi đang cố gắng ghi đè lên trình duyệt chuẩn (Ctrl + p) để in nội dung của một khung nội tuyến.Cách ghi đè in trình duyệt chuẩn và in khung nội tuyến theo mặc định

tôi biết làm thế nào để in một nội dung iframe sử dụng javascript:

window.frames['webcontent'].focus(); 
window.frames['webcontent'].print();

tôi biết làm thế nào để làm chạy javascript trước khi in ví dụ như được mô tả ở đây: Check for when a user has selected to print using javascript

Bất kỳ lời khuyên nào?

Cảm ơn

Nguồn

2014-07-25 Burjua

Đó là không thể (sử dụng Javascript). Có một số hỗ trợ thử nghiệm cho các sự kiện in do người dùng khởi tạo trong các trình duyệt hiện đại, nhưng những sự kiện are not cancelable ("sự kiện đơn giản") để toàn bộ trang vẫn in ngay cả khi bạn xen vào mã tùy chỉnh để in khung quan tâm. Với giới hạn này, đặt cược tốt nhất của bạn có thể là cung cấp cho người dùng một nút lớn kích hoạt chức năng in khung tùy chỉnh của bạn (xem printContentFrameOnly bên dưới, kích hoạt nó mà không có đối số) và hy vọng họ sẽ sử dụng nút thay vì ctrl-p .

Nếu nó sẽ có thể, đây sẽ là cách để làm điều đó (dựa trên this answer):

// listener is a function, optionally accepting an event and 
// a function that prints the entire page 
addPrintEventListener = function (listener) { 

    // IE 5.5+ support and HTML5 standard 
    if ("onbeforeprint" in window) { 
     window.addEventListener('beforeprint', listener); 
    } 

    // Chrome 9+, Firefox 6+, IE 10+, Opera 12.1+, Safari 5.1+ 
    else if (window.matchMedia) { 
     var mqList = window.matchMedia("print"); 

     mqList.addListener(function (mql) { 
      if (mql.matches) listener(); // no standard event anyway 
     }); 
    } 

    // Your fallback method, only working for JS initiated printing 
    // (but the easiest case because there is no need to cancel) 
    else {  
     (function (oldPrint) { 
      window.print = function() { 
       listener(undefined, oldPrint); 
      } 
     })(window.print); 
    } 
} 

printContentFrameOnly = function (event) { 
    if (event) event.preventDefault(); // not going to work 
    window.frames['webcontent'].focus(); 
    window.frames['webcontent'].print(); 
} 

addPrintEventListener(printContentFrameOnly);

Nguồn

2014-07-28 13:18:14 Julian

Tôi đã tìm kiếm một giải pháp javascript, như css đã không làm việc cho tôi. Đánh dấu đây là câu trả lời. – Burjua

Cảm ơn bạn. Đối với những gì nó có giá trị, tôi hoàn toàn đồng ý xDNP xứng đáng với giải thưởng tiền thưởng, và tôi cũng upvoted câu trả lời của họ. – Julian

Bạn có thể định nghĩa một tập tin css cho in ấn:

@media print { 
    * { display: none; } 
    iframe { display: block; } 
    }

EDIT

Mybad didnt thử nghiệm nó.

* { display: none; } is somehow overwriting all

Nhưng điều này đang làm việc như một nét duyên dáng

http://jsfiddle.net/c4e3H/ 

    @media print { 
    h1, p{ display: none; } 
    }

Nguồn

2014-07-25 11:56:46 jungerislaender

Không, nó không hoạt động, chỉ cần in một trang trắng tinh. Chrome không in nội dung khung nội tuyến ngay cả khi không có quy tắc này, vì vậy tôi không nghĩ rằng tôi có thể làm điều đó chỉ với css. – Burjua

Cái đầu tiên của bạn không hoạt động vì '* {display: none; } 'ẩn các phần tử cha của' iframe' ('html' /' body') của bạn. – cchamberlain

Anh, điều này có thể dễ dàng đạt được thông qua CSS: See thisJSfiddle: Tested

<style> 
@media print{ 
    body * {display:none;} 
    .toPrint{display:block; border:0; width:100%; min-height:500px} 
} 
</style>

Để một Tệp HTML là:

<body> 
    <h3>I do not want this title Printed</h3> 
    <p> This paragraph should not be printed</p> 
    <iframe class="toPrint" src="http://akitech.org"></iframe> 
    <button onclick="window.print()">Print</button> 
</body>

Nguồn

2014-07-28 16:59:00 tika

Sử dụng 'body * {}' chọn tất cả các phần tử nội dung trong CSS – tika

Đó là vấn đề. Nó ẩn tất cả các phần tử cơ thể khi hộp thoại in hiển thị trang để chỉ hiển thị khung nội tuyến (do quy tắc css thứ hai). Nó sẽ không áp dụng cho khung nội tuyến của khung nội tuyến bởi vì css của khung cha mẹ của khung hình không có mang trên nó. – Slight

Điều này in một khung nội tuyến với nội dung cắt xén thanh cuộn trong cả chrome và IE cho tôi. – cchamberlain

Cách duy nhất tôi có thể nghĩ là ẩn tất cả nội dung trong tài liệu ngoại trừ khung nội tuyến và làm cho nó phù hợp với toàn bộ tài liệu.

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<style type="text/css"> 
body.hide *, body #backdrop 
{ 
    display: none !important; 
} 
body.hide #my_print_iframe, body.hide #backdrop 
{ 
    background: white; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    border: 0; 
    width: 100%; 
    height: 100%; 
    display: block !important; 
} 
@media print { 
    body.hide #backdrop 
    { 
     display: none !important; 
    } 
} 
</style> 
    <script> 
    $(document).on('keydown', function(e){ 
     if (e.keyCode == 80 && (e.metaKey || e.ctrlKey)) { 
      $("body").addClass('hide'); 
      setTimeout(function(){ 
       $("body").removeClass('hide'); 
      },1000) 
     } 
    }) 
    </script> 
</head> 
<body> 
    <div> 
    this is some visible text 
    </div> 
    <iframe id="my_print_iframe" src="//example.com"></iframe> 
</body> 
</html>

tôi đã sử dụng thời gian chờ (nasty tôi biết) bởi vì ít nhất chrome 38 không gửi sự kiện KeyUp sau ctrl + p

Nguồn

2014-08-03 01:30:38

Hi có thể được mã này sẽ giúp bạn ..

function PrintElem(elem) 
{ 
    Popup($(elem).html()); 
} 

function Popup(data) 
{ 
    var mywindow = window.open('', 'printMe', 'height=400,width=600'); 
    mywindow.document.write('<html><head><title>Print Me</title>'); 
    mywindow.document.write('</head><body >'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 

    mywindow.print(); 
    mywindow.close(); 

    return true; 
}

và gọi hàm PrintElem ('iframe') trên trang của bạn.

Nguồn

2014-08-04 07:11:21 user2706194

Ý tưởng là đặt nội dung iframe ở đâu đó trên trang và chỉ in nội dung đó bằng cách ẩn nội dung gốc.

Điều này có thể được thực hiện bằng cách lấy nội dung khung nội tuyến khi sự kiện Ctrl + P được bắt đầu (qua JavaScript) và chỉ in nội dung của nó (thông qua CSS @media type).

HTML Code:

<div id="dummy_content"><!-- Here goes the iframe content, which will be printed --></div> 
    <div id="content_wrapper"> 
     <div id="current_content">Current Content that the user see<div> 
     <iframe id="myIframe" src="iframe.html"></iframe> 
    </div>

CSS Code:

@media screen { 
    #dummy_content { 
     display:none; /* hide dummy content when not printing */ 
    } 
}    
@media print { 
    #dummy_content { 
     display:block; /* show dummy content when printing */ 
    } 
    #content_wrapper { 
     display:none; /* hide original content when printing */ 
    } 
}

Javascript Code:

 var dummyContent = document.getElementById("dummy_content"); 
     function beforePrint() { 
       var iFrame = document.getElementById("myIframe"); 
       dummyContent.innerHTML = iFrame.contentWindow.document.body.innerHTML; // populate the dummy content (printable) with the iframe content 
     } 

     document.onkeydown = function(e) { 
      if (e.ctrlKey && e.keyCode == 80) { 
       beforePrint(); 
      } 
     }

Nguồn

2014-08-04 11:51:06

Cách ghi đè in trình duyệt chuẩn và in khung nội tuyến theo mặc định

Trả lời

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