2013-07-19 12 views
11

Tôi đã sử dụng chức năng này cho plugin Wordpress của tôi sử dụng jQuery để in nội dung từ div với class "table_disp". Làm thế nào tôi có thể in phong cách css cùng với nó.Chức năng in jQuery để in nội dung div bằng css

function pop_print(){ 
    w=window.open(null, 'Print_Page', 'scrollbars=yes');   
    w.document.write(jQuery('.table_disp').html()); 
    w.document.close(); 
    w.print(); 
} 

Bất kỳ ý tưởng nào?

+0

Bạn có nghĩa là giống như $ ('# mục'). Css (' màu ',' # 999999 '); ? –

+0

Tôi có nên sử dụng một cái gì đó như thế này không .. w.document.write (jQuery ('. Table_disp'). Css ('color', '# 999999'). Html()); –

Trả lời

9

Bạn cần bao gồm biểu định kiểu SAME bạn đang sử dụng trong trang chính trong cửa sổ bật lên. Bạn có thể muốn tạo một trang/trình bao bọc giả có biểu định kiểu của bạn trong đó, sau đó tiêm HTML của bạn.

+1

Bạn có thể giải thích nó bằng một ví dụ sử dụng chức năng của tôi không. –

+0

Tôi đã thực hiện chỉnh sửa để bao gồm mã này. –

+0

Nó có thể hữu ích nếu nó là một trang web thông thường. Kể từ khi tôi đang sử dụng WordPress của nó khác nhau để enqueue các stylesheet. Nếu tôi làm như vậy, nó chỉ chuyển hướng tôi đến một trang khác không tồn tại. :( –

1

nếu bạn có thể thêm plugin, ấn bản Jquery Plugin này hoạt động tốt (vì bạn đã sử dụng jQuery) và thực hiện chính xác những gì bạn cần. http://plugins.jquery.com/printThis/

Nó làm cho một khung nội tuyến và sử dụng css trang của bạn cộng cho phép một tập tin css thêm đặc biệt cho in ấn, cùng với những thứ khác

3
function PrintElem(elem) { 
    Popup(jQuery(elem).html()); 
} 

function Popup(data) { 
    var mywindow = window.open('', 'my div', 'height=400,width=600'); 
    mywindow.document.write('<html><head><title></title>'); 
    mywindow.document.write('<link rel="stylesheet" href="http://www.test.com/style.css" type="text/css" />'); 
    mywindow.document.write('<style type="text/css">.test { color:red; } </style></head><body>'); 
    mywindow.document.write(data); 
    mywindow.document.write('</body></html>'); 
    mywindow.document.close(); 
    mywindow.print();       
} 

<a href="#" id="hrefPrint" onclick="PrintElem('.print_div')">Print</a>