Làm cách nào để in một phần của trang HTML được hiển thị trong JavaScript?

Mã JavaScript window.print() có thể in trang HTML hiện tại.Làm cách nào để in một phần của trang HTML được hiển thị trong JavaScript?

Nếu tôi có div trong trang HTML (ví dụ: trang được hiển thị từ chế độ xem ASP.NET MVC), thì tôi chỉ muốn in div.

Có bất kỳ jQuery unobtrusive JavaScript hoặc mã JavaScript bình thường nào để triển khai yêu cầu này không?

Làm cho nó rõ ràng hơn, giả sử các trang HTML rendered là như:

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head id="Head" runat="server"> 
     <title> 
      <asp:ContentPlaceHolder runat="server" ID="TitleContent" /> 
     </title> 
    </head> 

    <body> 
      <div id="div1" class="div1">....</div> 
      <div id="div2" class="div2">....</div> 
      <div id="div3" class="div3">....</div> 
      <div id="div4" class="div4">....</div> 
      <div id="div4" class="div4">....</div> 
     <p> 
      <input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /> 
     </p> 
    </body> 
</html>

Sau đó, tôi muốn nhấn vào nút Print, chỉ in div3.

Nguồn

2009-07-02 KentZhou

tôi sẽ đi về nó hơi như thế này:

<html> 
    <head> 
     <title>Print Test Page</title> 
     <script> 
      printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">') 
      function printDiv(divId) { 
       window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML; 
       window.frames["print_frame"].window.focus(); 
       window.frames["print_frame"].window.print(); 
      } 
     </script> 
    </head> 

    <body> 
     <h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1> 
     <b>Div 1:</b> <a href="javascript:printDiv('div1')">Print</a><br> 
     <div id="div1">This is the div1's print output</div> 
     <br><br> 
     <b>Div 2:</b> <a href="javascript:printDiv('div2')">Print</a><br> 
     <div id="div2">This is the div2's print output</div> 
     <br><br> 
     <b>Div 3:</b> <a href="javascript:printDiv('div3')">Print</a><br> 
     <div id="div3">This is the div3's print output</div> 
     <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe> 
    </body> 
</html>

Nguồn

2009-07-02 02:33:39

Cảm ơn. Giải pháp này hoạt động tốt. – KentZhou

Nhưng đề xuất của printDivCSS là gì? Có vẻ như không cần phải sử dụng nó. – KentZhou

printDivCSS là chỉ có nếu bạn cần phải định dạng những gì bạn đang in với một stylesheet. Nếu bạn không muốn văn bản in của mình được định dạng bằng biểu định kiểu, thì bạn không cần nó. –

Bạn có thể sử dụng biểu định kiểu in, nhưng điều này sẽ ảnh hưởng đến tất cả các chức năng in.

Bạn có thể thử có một bản định kiểu in bên ngoài, và nó được bao gồm qua JavaScript khi nhấn một nút và sau đó gọi window.print(), sau đó xóa nó.

Nguồn

2009-07-02 00:30:19 alex

này sẽ làm việc, nhưng với một số sửa đổi để cho phép trang "đặt lại" sau khi bạn đã in mục tiêu của mình. Ví dụ, ngay trước khi in, mở một cửa sổ phương thức hoặc một số loại lớp phủ cho biết rằng hiện có thể in (hoặc gọi window.print() ngay) và sau đó khi người dùng nhấp chuột OK hoặc Close, bảng định kiểu có thể tự đặt lại. – Funka

Ồ, ngoài ra, bạn không nhất thiết phải có tệp CSS bên ngoài được tải động, bạn có thể tải nó trước nhưng chỉ điều chỉnh các lớp trên div đích hoặc vùng chứa khác của bạn khi sẵn sàng in. (Và loại bỏ các lớp học khi hoàn thành.) – Funka

-1

Cách sử dụng canvas? Vẽ nó lên một cửa sổ mới sau đó gọi phương thức print() từ cửa sổ mới đó?

Bạn có thể tìm thấy tài liệu hơn thông qua đây: drawWindow()

Nguồn

2009-07-02 02:04:06 Paul

Dọc theo đường cùng như một số những gợi ý bạn sẽ cần phải làm ít nhất là sau:

tải một số CSS động thông qua JavaScript
Craft một số in quy tắc CSS cụ thể
Áp dụng quy tắc CSS ưa thích của bạn thông qua JavaScript

Một ví dụ CSS có thể đơn giản như thế này:

@media print { 
    body * { 
    display:none; 
    } 

    body .printable { 
    display:block; 
    } 
}

JavaScript của bạn sau đó sẽ chỉ cần phải áp dụng các lớp học "in" đến div mục tiêu của bạn và nó sẽ là điều duy nhất có thể nhìn thấy (miễn là không có các quy tắc CSS xung đột khác - một bài tập riêng biệt) khi in xảy ra.

<script type="text/javascript"> 
    function divPrint() { 
    // Some logic determines which div should be printed... 
    // This example uses div3. 
    $("#div3").addClass("printable"); 
    window.print(); 
    } 
</script>

Bạn có thể muốn loại bỏ lớp khỏi mục tiêu sau khi in đã xảy ra và/hoặc xóa CSS động sau khi in đã xảy ra.

Dưới đây là ví dụ làm việc đầy đủ, sự khác biệt duy nhất là CSS in không được tải động. Nếu bạn muốn nó thực sự không phô trương thì bạn sẽ cần phải load the CSS dynamically like in this answer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Print Portion Example</title> 
    <style type="text/css"> 
     @media print { 
     body * { 
      display:none; 
     } 

     body .printable { 
      display:block; 
     } 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 

    <body> 
    <h1>Print Section Example</h1> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div4">Div 4</div> 
    <div id="div5">Div 5</div> 
    <div id="div6">Div 6</div> 
    <p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p> 
    <script type="text/javascript"> 
     function divPrint() { 
     // Some logic determines which div should be printed... 
     // This example uses div3. 
     $("#div3").addClass("printable"); 
     window.print(); 
     } 
    </script> 
    </body> 
</html>

Nguồn

2009-07-02 07:00:23

Cảm ơn. Có vẻ như nó không hoạt động đúng. – KentZhou

Đối với FF, giải pháp này sẽ in toàn bộ trang bằng div3. Đối với IE7, giải pháp này sẽ in toàn bộ trang nhưng thay thế div3 bằng trống. – KentZhou

Phiên bản Firefox nào? Khi tôi thử nghiệm này với IE nó đã được với IE6 và nó hoạt động chính xác - chỉ in "Div 3". Firefox 3.5.2 thể hiện hành vi tương tự. Google Chrome 2.0.172.43 cũng thể hiện hành vi tương tự. Có lẽ tôi không hiểu yêu cầu của bạn. –

Hãy thử mã JavaScript này:

function printout() { 

    var newWindow = window.open(); 
    newWindow.document.write(document.getElementById("output").innerHTML); 
    newWindow.print(); 
}

Nguồn

2014-07-29 20:47:48

Đó chỉ là một bảng chưa được định dạng trên một tab mới cho tôi. Không có nội dung nào được in. – SteveCav

Tôi KHÔNG MUỐN MỞ MÀN HÌNH MỚI. BẠN CÓ BAO GIỜ NÀO ĐỂ IN MỘT PHẦN CỦA TRANG VÀO TRANG HIỆN TẠI? – huykon225

<div id="invocieContainer"> 
    <div class="row"> 
     ...Your html Page content here.... 
    </div> 
</div> 

    <script src="/Scripts/printThis.js"></script> 
     <script> 
       $(document).on("click", "#btnPrint", function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        $("#invocieContainer").printThis({ 
         debug: false,    // show the iframe for debugging 
         importCSS: true,   // import page CSS 
         importStyle: true,   // import style tags 
         printContainer: true,  // grab outer container as well as the contents of the selector 
         loadCSS:"/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple 
         pageTitle: "",    // add title to print page 
         removeInline: false,  // remove all inline styles from print elements 
         printDelay: 333,   // variable print delay; depending on complexity a higher value may be necessary 
         header: null,    // prefix to html 
         formValues: true   // preserve input/form values 
        }); 

       }); 
      </script>

Đối printThis.js souce mã, sao chép và PASE bên dưới URL trong tab mới https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

Nguồn

2016-06-17 11:07:48

Làm cách nào để in một phần của trang HTML được hiển thị trong JavaScript?

Trả lời

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