Làm cách nào để in nội dung iframe bằng jQuery và JavaScript?


Nhận phần tử từ trong iframe bằng JavaScript


Nhấp vào nút để ẩn phần tử H1 đầu tiên trong khung nội tuyến (tài liệu khác)

Ẩn phần tử H1

Nhận phần tử trong khung nội tuyến

Nhận đầu tiên

phần tử bên trong iframe và ẩn nó

Thí dụ

var iframe = tài liệu. getElementById("myFrame");
var elmnt = iframe. nội dungWindow. tài liệu. getElementsByTagName("H1")[0];
elmnt. Phong cách. display = "không";

Tự mình thử »

Plugin jQuery cho phép bạn in các phần (phần tử) trong trang mà không cần sử dụng cửa sổ bật lên hoặc khung nội tuyến. hữu ích cho các phần phức tạp mà bạn không muốn sao chép/sao chép

Các trường hợp sử dụng / Khi bạn muốn sử dụng cái này

Ứng dụng Trang đơn (đọc. rất nhiều JavaScript trong trang của bạn. )

Bạn có một Ứng dụng Trang Đơn hơi phức tạp và bạn muốn in tất cả hoặc chỉ (các) phần của DOM mà không cần phải nỗ lực thiết lập một bản sao/bản sao thích hợp trong iframe -- một công việc có thể đặc biệt . g. lưới dữ liệu lớn, đồ họa động như đồ thị dựa trên D3, v.v.

Sẽ thật tốt nếu có một công cụ nhỏ có thể ẩn và bỏ ẩn những phần không liên quan trong DOM hiện tại của bạn trong khi in

Ồ, và Bản xem trước bản in sẽ rất tuyệt

Câu trả lời

Khá đơn giản. sử dụng

{
  printLeafClass:         "pip-print",
  printParentClass:       "pip-print-parent",
  printRootClass:         "pip-print-root",
  notPrintedLeafClass:    "pip-do-not-print"
};
4 thay thế. Xem thêm ví dụ sử dụng bên dưới

Trình duyệt của bạn không cho phép iframe cũng như cửa sổ bật lên

Trong các môi trường có độ bảo mật cao và bị hạn chế khác, nơi khung nội tuyến không được sử dụng, các cách 'tiêu chuẩn' để in trang web là không thể (vì tất cả các phương pháp đều dựa vào khả năng tạo và điền vào khung nội tuyến hoặc cửa sổ bật lên)

(Cũng xin lưu ý rằng bất kỳ người dùng nào sử dụng trình chặn quảng cáo & cửa sổ bật lên rất có thể không chỉ chặn bất kỳ cửa sổ bật lên nào ngay từ đầu mà còn giết cả iframe của bạn, đặc biệt khi những trình chặn đó đã được nâng cấp lên mức bảo vệ tích cực. jQuery. in trong trang không bận tâm. Trên thực tế, chúng tôi chân thành khuyến khích chặn quảng cáo trong các trang web của bạn. )

Câu trả lời

Một lần nữa,

{
  printLeafClass:         "pip-print",
  printParentClass:       "pip-print-parent",
  printRootClass:         "pip-print-root",
  notPrintedLeafClass:    "pip-do-not-print"
};
4 tại dịch vụ của bạn. Mã ví dụ ở trên (xem Trường hợp sử dụng đầu tiên) chỉ áp dụng một tập hợp các lớp cho DOM hiện tại của bạn và thực sự chỉ có vậy. Nó cũng gọi lệnh in của trình duyệt tiêu chuẩn (
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
0) vào thời điểm thích hợp và cung cấp rất nhiều sự kiện mà bạn có thể kết nối với các quy trình xem trước và in để tinh chỉnh thêm DOM của mình

Khi tất cả đã hoàn tất, các lớp 'pip' lại bị xóa khỏi DOM và tình trạng cũ được khôi phục

Dễ như ăn bánh

Và không sao chép ảnh chụp nhanh DOM hoặc cách khác vào iframe hoặc cửa sổ bật lên, do đó trình duyệt cũng tiêu thụ ít bộ nhớ hơn

Ví dụ sử dụng

Chỉ cần thiết lập một phiên bản in bằng cách sử dụng

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
1 và sau đó thực hiện quy trình in bằng cách gọi phương thức
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2 của nó một lần

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
var pip_instance = $your_selection.print();

//...

// start the printing process:
pip_instance.continue();

và với một bản xem trước, nó sẽ giống như thế này

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();


API

$. fn. print(options) có thể được sử dụng để đặt các tùy chọn được chia sẻ giữa tất cả các trường hợp 'in trong trang', tôi. e. sử dụng cái này nếu bạn muốn điều chỉnh các giá trị mặc định. $els. print(options) khởi tạo một phiên bản in trong trang cho tập hợp nút DOM đã cho. Trả về một tham chiếu đến phiên bản in trong trang để bạn có thể xâu chuỗi các phương thức in trong trang

Tùy chọn

Bạn có thể ghi đè tên lớp được áp dụng bởi jQuery. print-in-page để thực hiện hiển thị/ẩn nội dung DOM có liên quan. Đây là bộ mặc định

{
  printLeafClass:         "pip-print",
  printParentClass:       "pip-print-parent",
  printRootClass:         "pip-print-root",
  notPrintedLeafClass:    "pip-do-not-print"
};

mà bạn có thể ghi đè bằng cách chỉ định các tên lớp khác nhau trong

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
3 như thế này

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};

hoặc

________số 8

Sự kiện

in trong trang kích hoạt các sự kiện tùy chỉnh này trên phiên bản in trong trang

initPrintingđược kích hoạt khi bạn gọi phương thức API
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2 lần đầu tiên, bắt đầu quá trình/phiên in trong trình duyệt của bạnstartPrintPreview. renderPrintPreviewghi đè mặc định tại đây khi bạn có nhu cầu kết xuất cụ thể (thao tác DOM) không bổ sung cho hành vi mặc định. Xem [`javascripts/main. js`](javascripts/main. js) để biết ví dụ áp dụng quy trình lọc bổ sung trong sự kiện
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
5. kết thúcPrintPreviewKết thúc quá trình kết xuất/hiển thị bản xem trước. Đến bây giờ, chúng tôi hy vọng bạn có màn hình xem trước theo thứ tự và đang chờ hành động ack/nack của người dùng. startPrintQuá trình in thực sự bắt đầu; . renderPrintgiai đoạn này đang thực hiện lệnh gọi
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
0 thực tế. Đừng
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
7 trừ khi bạn muốn thay thế chính quy trình in thực tế. kết thúcIn. startRollbackafterPrintbạn nhận được sự kiện này khi quá trình in đã hoàn thành (onafterprint) hoặc đã bị hủy bỏ thông qua phương pháp API
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
8renderRollbackafterPrinthành động mặc định sau sự kiện này là khôi phục DOM về trạng thái ban đầu từ trước khi bắt đầu phiên xem trước/in kết thúcRollbackafterPrint. in xong

Đây là sự kiện cuối cùng bạn sẽ nhận được vào cuối bất kỳ và mỗi phiên in/xem trước

Lưu ý rằng quá trình in kết thúc sau khi sự kiện này trôi qua. Phiên bản in (i. e. tham chiếu đã được trả về trước đó bởi `. print()` gọi) sẽ tự thiết lập lại sau này. Điều này có nghĩa là bạn có thể gọi `. continue()` lần nữa để chạy lại quá trình in
abortPrintingsự kiện này được kích hoạt khi phương thức API
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
8 đã được gọi và quá trình in/xem trước hiện tại có thể bị hủy bỏ

Lưu ý về trình xử lý sự kiện

Khi bạn có một trình xử lý sự kiện bao gồm một số 'mã không đồng bộ', hãy. g. cần đợi người dùng nhấp vào nút, sau đó quá trình in/xem trước có thể tạm dừng ở bước nhất định cho đến khi mã không đồng bộ kết thúc và có thể gọi phương thức API

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2

Ví dụ thứ hai trong phần Trường hợp sử dụng ở trên đã gợi ý cách thực hiện việc này

  • bạn phải thông báo cho jQuery. trang in mà trình xử lý sự kiện hiện tại muốn đợi một sự kiện không đồng bộ kết thúc bằng cách gắn cờ sự kiện là 'dừng lan truyền'

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    6

  • bổ sung của hành động này là cần phải gọi phương thức

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    2 theo cách thủ công từ trình xử lý sự kiện không đồng bộ mà chúng tôi muốn đợi, e. g

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    8

Ý chính của điều này là

  • mọi sự kiện đều được theo sau bởi một

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    2 trừ khi (các) trình xử lý sự kiện đã gắn cờ sự kiện qua
    {
      printLeafClass:         "pip-print",
      printParentClass:       "pip-print-parent",
      printRootClass:         "pip-print-root",
      notPrintedLeafClass:    "pip-do-not-print"
    };
    
    3

  • mọi sự kiện đều được theo sau bởi mã 'quy trình mặc định' trừ khi (các) trình xử lý sự kiện gắn cờ sự kiện qua

    {
      printLeafClass:         "pip-print",
      printParentClass:       "pip-print-parent",
      printRootClass:         "pip-print-root",
      notPrintedLeafClass:    "pip-do-not-print"
    };
    
    4

    Lưu ý rằng điều này không ngăn cản việc thực thi ngầm định của

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    2. cả hai hành động tiềm ẩn đều độc lập, như được hiển thị trong phần này của jQuery. mã nội bộ in trong trang xử lý các hoạt động tiềm ẩn này

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    3

  • khi người dùng muốn ngăn các trình xử lý sự kiện đã đăng ký tiếp tục thực thi cho sự kiện hiện tại, thì cô ấy có thể gắn cờ sự kiện bằng

    {
      printLeafClass:         "pip-print",
      printParentClass:       "pip-print-parent",
      printRootClass:         "pip-print-root",
      notPrintedLeafClass:    "pip-do-not-print"
    };
    
    6 như thường lệ trong các trình xử lý sự kiện

  • Ngoài ra, hãy lưu ý rằng API

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    8 gọi ngầm định ____02 -- sau khi kích hoạt sự kiện
    {
      printLeafClass:         "pip-print",
      printParentClass:       "pip-print-parent",
      printRootClass:         "pip-print-root",
      notPrintedLeafClass:    "pip-do-not-print"
    };
    
    9, do đó, các quy tắc trên về thực thi mã ngầm định sau các sự kiện sẽ được áp dụng, như thường lệ

phương pháp

trong đó

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0 là phiên bản in trong trang thu được thông qua API
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
1

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. bật (sự kiện, f)

chức năng đăng ký

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
3 cho sự kiện đã cho

Các trình xử lý được thực hiện theo thứ tự chúng được đăng ký
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
3 có thể là một mảng xử lý. mỗi trong số này sau đó được đăng ký với sự kiện nhất định
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. tắt (sự kiện, f)

chức năng hủy đăng ký

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
3 cho sự kiện đã cho

// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
3 có thể là một mảng xử lý. mỗi trong số này sau đó không được đăng ký khỏi sự kiện đã cho
Khi bạn không chỉ định bất kỳ trình xử lý nào (hoặc
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
8), thì tất cả các trình xử lý đã đăng ký cho sự kiện này đều chưa được đăng ký
Khi bạn không chỉ định một sự kiện, thì trình xử lý sẽ không được đăng ký cho tất cả các sự kiện
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. tiếp tục()

bắt đầu/tiếp tục thao tác in

Ghi chú. khi được gọi trong khi quá trình đã tự bắt đầu, tôi. e. khi được gọi từ trình xử lý sự kiện trong trạng thái hành động đồng bộ, lệnh gọi sẽ bị bỏ qua (thay vào đó, giá trị trả về của trình xử lý sự kiện được quan sát)
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. prime(N)prime thao tác in cho N
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2 lời gọi. sử dụng phương pháp này khi bạn có nhiều quy trình không đồng bộ đang chạy (các) trình xử lý sự kiện của mình và cần mỗi một trong số chúng gọi
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2 trước khi quá trình in có thể bắt đầu.
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. Huỷ bỏ()

Bạn có thể HỦY BỎ quá trình in bất cứ lúc nào bằng cách gọi phương thức này

DOM sẽ được khôi phục lại vinh quang ban đầu trước khi in-xem trước và quy trình in được đặt lại
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. isAborted()true khi phiên in hiện tại bị hủy bỏ. Cờ này giữ cho đến khi phiên kết thúc (i. e. cho đến sau sự kiện `donePrinting`).
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. isWorking()true khi thành phần in trong trang được coi là 'đang hoạt động' i. e. khi nó không nghe các cuộc gọi
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
2 vì nó đã tự di chuyển theo ý mình
// tweak the global instance, which serves as a 
// defaults container for all .print() sessions
// yet to come:
$.fn.print({
  printLeafClass:         "myApp-show-leaf",
  printParentClass:       "myApp-show-parent",
  printRootClass:         "myApp-show-root",
  notPrintedLeafClass:    "myApp-doNotShow-sibling-leaf"
};
0. phần tử([$els])getter/setter cho tập hợp các phần tử DOM sẽ được in/xem trước. Bạn có thể thay đổi bộ sưu tập phần tử DOM cho đến khi bắt đầu xem trước (i. e. ngay trước sự kiện
// set up a special set of classes for this particular
// instance:
var pip = $('table.report').print({
  printLeafClass:         "report-show-on-print",
  printParentClass:       "report-show-on-print",
  printRootClass:         "report-show-on-print",
  notPrintedLeafClass:    "report-hide-on-print"
};

//...
pip.continue();
8) và sau khi khôi phục lại tình trạng ban đầu (tôi. e. ngay trước sự kiện
// set up a special set of classes for this particular
// instance:
var pip = $('table.report').print({
  printLeafClass:         "report-show-on-print",
  printParentClass:       "report-show-on-print",
  printRootClass:         "report-show-on-print",
  notPrintedLeafClass:    "report-hide-on-print"
};

//...
pip.continue();
9)______70. tiêu diệt () bí danh của
var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
61____70. phá bỏ(). phân tích jQuery

Ví dụ / Trình diễn

Xem thư mục

var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
// set up the print environment, but do NOT execute it yet.
// Also hook into the post-preview to ensure we will wait for
// the user to hit 'okay' button after having seen the preview:
var pip_instance = $your_selection.print()
.on("finishPrintPreview", function (e) {
    // signal the system that it should NOT automatically 
    // call .continue() after we are done here:
    e.stopPropagation();
});

// set up the preview 'okay' button click handler to continue
// printing after having seen the preview.
$('#preview-okay').click(function (e) {
  pip_instance.continue();        
});

// .. and likewise for the 'abort' button after having seen the preview
$('#preview-abort').click(function (e) {
  pip_instance.abort();        
});

//...

// start the preview process 
// (the print process will follow automatically):
pip_instance.continue();
63 để biết một số ví dụ

ghi chú

  • Tất cả các bản trình diễn đều sử dụng RequireJS để tải nội dung JavaScript

  • Tất cả các bản demo chia sẻ một tệp trình điều khiển JS duy nhất

  • Kiểm tra sự khác biệt trong HTML để biết các ví dụ khác nhau trong thư mục

    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    64. những thứ này xây dựng lẫn nhau từ đơn giản đến phức tạp, trong khi mã trình điều khiển
    var $your_selection = $('.collect-the-DOM-leaves-you-wish-to-print');
    // set up the print environment, but do NOT execute it yet.
    // Also hook into the post-preview to ensure we will wait for
    // the user to hit 'okay' button after having seen the preview:
    var pip_instance = $your_selection.print()
    .on("finishPrintPreview", function (e) {
        // signal the system that it should NOT automatically 
        // call .continue() after we are done here:
        e.stopPropagation();
    });
    
    // set up the preview 'okay' button click handler to continue
    // printing after having seen the preview.
    $('#preview-okay').click(function (e) {
      pip_instance.continue();        
    });
    
    // .. and likewise for the 'abort' button after having seen the preview
    $('#preview-abort').click(function (e) {
      pip_instance.abort();        
    });
    
    //...
    
    // start the preview process 
    // (the print process will follow automatically):
    pip_instance.continue();
    
    65 phục vụ tất cả

  • lưu ý rằng bản demo sắp xếp lại đã được điều chỉnh cụ thể để làm cho bản in thực tế khác với bản xem trước. bằng cách sử dụng các quy tắc CSS phương tiện in bổ sung và một vài bit DOM (HTML), bản in bao gồm nhiều trang, trong khi bản xem trước là một trang, trang này cũng không bao gồm tất cả nội dung trong trang đầu vào. Kiểm tra HTML và CSS của ví dụ để quan sát những gì diễn ra trong đó

    Bạn có thể in iframe không?

    nếu bạn mở mã html hoặc tệp pdf trên iframe của mình thì bạn chỉ cần in nó bằng cách sử dụng jquery .

    Bạn có thể truy cập nội dung của iframe không?

    Các. phương thức contents() cũng có thể được sử dụng để lấy tài liệu nội dung của iframe , nếu iframe nằm trên cùng miền với trang chính.