In nội dung DIV bằng JQuery

giả sử tôi có nhiều div trong trang của mình nhưng tôi muốn in nội dung của div cụ thể bằng jquery. tôi thấy có một plugin cho điều đó.In nội dung DIV bằng JQuery

jQuery Print Element

sử dụng plugin này chúng ta có thể dễ dàng in div nội dung như dưới đây.

$('SelectorToPrint').printElement();

nhưng điều gì xảy ra nếu div của tôi bị ẩn trong trang. vậy thì nó có hoạt động không. plugin này có thể in nội dung của div ẩn?

điều gì xảy ra nếu máy in không được đính kèm với máy khách. tôi muốn hiển thị thông báo nếu máy in không có sẵn cho khách hàng rằng "Máy in không tìm thấy"? cách xử lý tình huống này. vì vậy xin vui lòng tư vấn cho tôi những gì sẽ là cách tiếp cận tốt nhất để in nội dung của div ẩn trong trang và cũng như xử lý vấn đề máy in nếu máy in không được đính kèm.

nhờ

Nguồn

2011-09-23 Keith Costa

Bạn đã thậm chí đã cố gắng sử dụng nó? – Jack

div ẩn không được in bằng cách sử dụng plugin http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/ –

câu hỏi của bạn không có âm thanh như nếu bạn thậm chí đã cố gắng đó cho mình, vì vậy tôi thậm chí không nên nghĩ đến việc trả lời, nhưng: nếu một div ẩn không thể được in với một dòng:

$('SelectorToPrint').printElement();

chỉ cần thay đổi nó để:

$('SelectorToPrint').show().printElement();

mà nên làm cho nó hoạt trong mọi trường hợp.

cho phần còn lại, không có giải pháp. plugin sẽ mở hộp thoại in cho bạn nơi người dùng phải chọn máy in của mình. bạn chỉ đơn giản là không thể tìm ra nếu một máy in được gắn với javascript (và bạn (gần như) không thể in mà không có hộp thoại in - nếu bạn đang suy nghĩ về điều đó).

LƯU Ý:

Đối tượng $.browser đã được gỡ bỏ trong phiên bản 1.9.x của jQuery làm thư viện này không được hỗ trợ.

Nguồn

2011-09-23 14:14:54 oezi

Có cách để sử dụng tính năng này với div ẩn nhưng bạn phải làm việc nhiều hơn với hàm printElement() và css.

Css:

#SelectorToPrint{ 
    display: none; 
}

Script:

$("#SelectorToPrint").printElement({ printBodyOptions:{styleToAdd:'padding:10px;margin:10px;display:block', classNameToAdd:'WhatYouWant'}})

này sẽ ghi đè màn hình: none trong cửa sổ mới, bạn mở và nội dung sẽ được hiển thị trên trang in xem trước và div trên trang web của bạn vẫn bị ẩn.

Nguồn

2013-02-19 10:26:05 user2086598

thử thư viện jquery này, jQuery In Yếu tố

http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/

Nguồn

2013-03-25 09:36:52

tôi thích thế này, tôi đã thử nghiệm nó và làm việc của nó

https://github.com/jasonday/printThis

$("#mySelector").printThis();

hoặc

$("#mySelector").printThis({ 
*  debug: false,    * show the iframe for debugging 
*  importCSS: true,   * import page CSS 
*  printContainer: true,  * grab outer container as well as the contents of the selector 
*  loadCSS: "path/to/my.css", * path to additional css file 
*  pageTitle: "",    * add title to print page 
*  removeInline: false  * remove all inline styles from print elements 
* });

Nguồn

2013-08-08 00:22:53

Bạn có thể làm theo các bước sau:

quấn div bạn muốn in vào div khác.
đặt trạng thái hiển thị div trình bao bọc thành không có trong css.
giữ div bạn muốn in trạng thái hiển thị dưới dạng chặn, dù sao nó sẽ bị ẩn vì bố cục của nó bị ẩn.
chỉ cần gọi $('SelectorToPrint').printElement();

Nguồn

2014-04-24 14:05:56 user826876

Đây là một giải pháp JQuery & hoạt Javascript để in div vì nó phong cách (với css nội bộ và bên ngoài)

$(document).ready(function() { 
      $("#btnPrint").live("click", function() {//$btnPrint is button which will trigger print 
       var divContents = $(".order_summery").html();//div which have to print 
       var printWindow = window.open('', '', 'height=700,width=900'); 
       printWindow.document.write('<html><head><title></title>'); 
       printWindow.document.write('<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" >');//external styles 
       printWindow.document.write('<link rel="stylesheet" href="/css/custom.css" type="text/css"/>'); 
       printWindow.document.write('</head><body>'); 
       printWindow.document.write(divContents); 
       printWindow.document.write('</body></html>'); 
       printWindow.document.close(); 

       printWindow.onload=function(){ 
       printWindow.focus();           
       printWindow.print(); 
       printWindow.close(); 
       } 
      }); 
});

này sẽ in div của bạn trong cửa sổ mới.

nút để kích hoạt sự kiện

<input type="button" id="btnPrint" value="Print This">

Nguồn

2017-05-20 06:12:09 CyberAbhay

In nội dung DIV bằng JQuery

Trả lời

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