2010-03-15 9 views
6

Tôi có ứng dụng .Net tự động tạo trang HTML nhỏ và bật lên trong cửa sổ mới bằng phương thức javascript document.open. Mọi thứ với chức năng đó đều hoạt động tốt.Làm cách nào để in từ cửa sổ bật lên trong javascript?

Bây giờ tôi muốn thêm nút vào trang HTML in trang. Tôi đã thử sử dụng mã sau để không có kết quả:

<a href='print.html' onClick='window.print();return false;'> 
<img src='images/printer.png' height='32px' width='32px'></a> 

Khi nút được nhấp trong cửa sổ bật lên, không có gì xảy ra. Nhưng khi mã nguồn của trang này được lưu và tải trong trình duyệt dưới dạng một trang riêng biệt, nút in hoạt động hoàn hảo. Vì vậy, nó sẽ xuất hiện rằng vấn đề là do thực tế là mã đang ở trong một cửa sổ popup. [Vấn đề bây giờ có vẻ là mã được ghi vào cửa sổ bật lên sau khi được mở.] Có ai biết cách khắc phục sự cố này hoặc bất kỳ giải pháp thay thế nào không?

EDIT:

phương pháp khác mà tôi đã thử với kết quả tương tự:

<input type='button' onclick='window.print()' value='Print' /> 

<a href='javascript:window.print()'> 
<img src='images/printer.png' height='32px' width='32px'></a> 

EDIT LẠI:

Đoạn mã trên hoạt động trong Firefox, nhưng không phải trong IE7. Bất kỳ ý tưởng về một công việc xung quanh cho IE?

EDIT một lần nữa:

Đây là một trường hợp thử nghiệm bằng cách sử dụng mã npupposted dưới đây. Thay vì mã cho cửa sổ bật lên sống trong một tệp html riêng biệt, tôi đang mở một url trống và sau đó viết mã cho nó. Bước này có vẻ là nguyên nhân gây ra sự cố.

<html> 
<head> 
    <title>main</title> 
</head> 
<body> 
    <h1> 
     Pop & print</h1> 
    <button onclick="pop();"> 
     Pop</button> 

    <script type="text/javascript"> 
     var POP; 
     function pop() { 
      var newWin = window.open('', 'thePopup', 'width=350,height=350'); 
     newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" + 
      "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" + 
      "<img src='images/printer.png' height='32px' width='32px'></a></body></html>"); 
     } 
    </script> 

</body> 
</html> 

Trả lời

1

Tôi đã giải quyết vấn đề bằng cách tạo ra một trang HTML trống với các đánh dấu HTML tiêu chuẩn. Sau đó tôi đã thêm nội dung bằng cách tạo một phần tử DOM mới và chỉnh sửa innerHTML. Mã kết quả cũng tương tự như trong ví dụ này, bạn chỉ cần thay thế các lệnh newWin.document.write như sau:

var newDiv = newWin.document.createElement('div'); 
newDiv.innerHTML = "<h1>Pop</h1>" + 
     "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" + 
     "<img src='images/printer.png' height='32px' width='32px'></a>" 
newWin.document.body.appendChild(newDiv); 

Mặc dù sự cố đã được giải quyết, tôi thật không chắc chắn nguyên nhân chính xác của là gì vấn đề. Nếu bất cứ ai có bất kỳ ý tưởng nào, tôi sẽ rất vui khi được nghe chúng.

3

Có thể là do bạn đang trả về false trong sự kiện onclick của thẻ liên kết.

Hãy thử điều này:

<input type="button" onclick="window.print()" value="Print" /> 
+0

này có kết quả tương tự, làm việc trong một cửa sổ trình duyệt riêng biệt nhưng không phải từ một popup. – sglantz

+0

Hmm! Khi tôi bấm vào nút nó mở ra ngăn xếp máy in cho tôi để chọn máy in. Bạn có máy in kèm theo không? Có lẽ nó không thể tìm thấy các máy in? Nhưng dù sao thì nó cũng nên mở hộp chọn máy in. – azamsharp

+0

Bạn đã thử mã từ cửa sổ bật lên chưa? Điều đó dường như là nguyên nhân gây ra vấn đề. – sglantz

1

Bạn có thể thử:

<input type="button" onclick="self.print()" value="Print" /> 

hay:

<input type="button" onclick="window.focus();window.print()" value="Print" /> 

Nhưng điều này có thể không làm việc trong MSIE do những hạn chế trong Cross-Frame Scripting. Cách tốt nhất để làm điều này, tôi nghĩ, là đặt nút in trên cửa sổ chính.

<script language="javascript"> 
    var winref = window.open('print.html','windowName','width=400,height=400'); 
</script> 

<form> 
    <input type="button" value="Print Popup" onclick="if (window.print) winref.print()"> 
</form> 
+0

Cả hai phương pháp đầu tiên đều không hoạt động. Phương pháp thứ ba không lý tưởng và phức tạp hơn vì mã cho trang HTML được tạo từ mã .Net phía sau dựa trên các tham số khác nhau. – sglantz

+0

Xin lỗi vì trở thành người mang những tin xấu. Nếu đó là tôi, trong mã nơi bạn tạo nút/liên kết mở cửa sổ bật lên, tôi sẽ tạo hai. "Hiển thị kết quả" và "Kết quả in" hoặc bất cứ điều gì ... – ghoppe

+0

Có vẻ như tôi có thể phải đi theo cách đó, nhưng tôi vẫn chưa từ bỏ. – sglantz

0

Nếu bạn muốn in những gì trong cửa sổ bạn đã mở từ, tôi đề nghị bạn sử dụng

window.opener.print(); 

trong popup.

+0

Tôi đang tìm cách in nội dung của cửa sổ bật lên, chứ không phải cửa sổ chính. – sglantz

+0

* Doh *, rất tiếc. – npup

1

Phải có nội dung nào đó lớn hơn mã được hiển thị. Tôi nghĩ rằng nó hoạt động tốt (được thử nghiệm một số bây giờ).

Đây là trường hợp thử nghiệm nhỏ gọn.Hãy thử nó trong thiết lập của bạn và xem những gì sẽ xảy ra! Kiểm tra của tôi là dưới Windows Vista, IE7 và IE8.

main.html:

<html> 
    <head> 
    <title>main</title> 
    </head> 
    <body> 

    <h1>Pop & print</h1> 
    <button onclick="pop();">Pop</button> 
    <script type="text/javascript"> 
     var POP; 
     function pop() { 
     POP = window.open('popup.html', 'thePopup', 'width=350,height=350'); 
     } 
    </script> 

    </body> 
    </html> 

popup.html:

<html> 
    <head> 
    <title>popup</title> 
    </head> 
    <body> 

    <h1>Pop</h1> 
    <p>Print me</p> 
    <a href="print.html" onclick="window.print();return false;"> 
     <img src="images/printer.png" height="32px" width="32px"> 
    </a> 

    </body> 
    </html> 
+0

Mã này hoạt động trên thiết lập của tôi, nhưng nó không hoàn toàn áp dụng được cho vấn đề của tôi.Sự khác biệt chính là tôi đang tạo mã html cho cửa sổ bật lên khi chạy. Bởi vì điều này, tôi đang mở một cửa sổ trống, sau đó viết html cho nó. Tôi sẽ cập nhật câu hỏi với một trường hợp thử nghiệm bằng cách sử dụng mã của bạn vẫn gây ra sự cố. – sglantz

1

Bạn quên: Tài liệu

newWin.document.close(); 

phải được đóng trước khi MSIE có thể in nó.

8

Dưới đây là một giải pháp mà làm việc cho tôi:

newWin.document.write(newhtml); 
newWin.window.location.reload(); // this is the secret ingredient 
newWin.focus();      // not sure if this line is necessary 
newWin.print(); 

Tôi không chắc chắn 100% lý do tại sao các công trình này nhưng tôi nghĩ rằng nó đã làm với một trong các cách sau: (1) là một vấn đề an ninh IE , (2) vấn đề phạm vi (tức là sau khi tạo tài liệu mới, IE bị nhầm lẫn về tài liệu cần in) hoặc (3) vấn đề về thời gian - tài liệu chưa sẵn sàng để 'chấp nhận' lệnh in. Trong mọi trường hợp, sau khi tải lại, hộp thoại in sẽ xuất hiện mà không có sự cố.

0

Tôi muốn tạo một phiên bản thân thiện với máy in của một trang mà sau đó tự động được in, đây là những gì tôi đã đưa ra, dường như làm việc tuyệt vời cho tôi!

function printPage(){ 
    var w = window.open(); 

    var headers = $("#headers").html(); 
    var field= $("#field1").html(); 
    var field2= $("#field2").html(); 

    var html = "<!DOCTYPE HTML>"; 
    html += '<html lang="en-us">'; 
    html += '<head><style></style></head>'; 
    html += "<body>"; 

    //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space 
    //This allows you to reuse this on lots of pages with the same template 
    if(headers != null) html += headers + "<br/><br/>"; 
    if(field != null) html += field + "<br/><br/>"; 
    if(field2 != null) html += field2 + "<br/><br/>"; 

    html += "</body>"; 
    w.document.write(html); 
    w.window.print(); 
    w.document.close(); 
}; 
1

này hoạt động trong Chrome:

<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;"> 

      <script type="text/javascript"> 
       window.onload = function() { 
        window.print(); 
        setTimeout(function() { 
         window.close(); 
        }, 1); 
       }; 
      </script> 
    </body>