Hướng dẫn html print div with css - html in div với css

23

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi đang làm việc trên một dự án và tôi muốn in nội dung div. Mã mà tôi đang sử dụng đang đáp ứng các yêu cầu của mình, nhưng tôi đang nhận được đầu ra đơn giản mà không cần CSS áp dụng cho nó và cũng không nhận được hình ảnh. Mã và đầu ra tôi nhận được và đầu ra tôi muốn.

Mã số:

function PrintElem(elem) {
    Popup($(elem).html());
}

function Popup(data) {
    var mywindow = window.open('', 'new div', 'height=400,width=600');
    mywindow.document.write('<html><head><title></title>');
    mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
    mywindow.close();

    return true;
}

Đầu ra tôi nhận được trước khi nhấp vào nút in:

Hướng dẫn html print div with css - html in div với css

Đầu ra Tôi nhận được bằng cách nhấp vào nút in:

Hướng dẫn html print div with css - html in div với css

hỏi ngày 27 tháng 1 năm 2014 lúc 11:25Jan 27, 2014 at 11:25

2

Nếu bạn muốn hiển thị CSS, bạn phải thêm thời gian chờ trước khi in nó vì phải mất một thời gian để CSS được áp dụng cho HTML và sau đó bạn sẽ có thể in nó.

Thử cái này:

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}

Hướng dẫn html print div with css - html in div với css

Mark Amery

133K78 Huy hiệu vàng395 Huy hiệu bạc443 Huy hiệu Đồng78 gold badges395 silver badges443 bronze badges

Đã trả lời ngày 5 tháng 2 năm 2017 lúc 9:51Feb 5, 2017 at 9:51

ObaidobaidObaid

4073 Huy hiệu bạc12 Huy hiệu Đồng3 silver badges12 bronze badges

2

Bạn cần thay đổi thuộc tính CSS media thành

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
0. Thêm dòng mới vào chức năng CreatPopup () như bên dưới bạn đã đính kèm CSS của mình:

mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );

Đã trả lời ngày 27 tháng 1 năm 2014 lúc 12:23Jan 27, 2014 at 12:23

1

Đề xuất của tôi là thêm vào thẻ

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
1 Một số JavaScript để thực hiện việc in và đóng.

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
2

Làm điều này sẽ luôn cho phép đủ thời gian để tài liệu và CSS tải trước khi cửa sổ in mở, sau đó đóng cửa sổ ngay sau khi cuộc đối thoại in đóng.

Đã trả lời ngày 29 tháng 6 năm 2017 lúc 8:44Jun 29, 2017 at 8:44

2

Nếu bạn đang sử dụng hình ảnh làm hình ảnh nền của trang web, bạn chắc chắn sẽ không nhận được nó, trong khi in trình duyệt vô hiệu hóa tất cả các hình ảnh nền.

Hãy thử sử dụng thẻ IMG thay thế. Ngoài ra, hãy đảm bảo trong tùy chọn Vô hiệu hóa Trình duyệt của bạn không được kiểm tra.img tags instead. Also make sure in your browser disable images option is not checked.

Đã trả lời ngày 23 tháng 9 năm 2015 lúc 7:21Sep 23, 2015 at 7:21

Hướng dẫn html print div with css - html in div với css

Một nguyên nhân có thể xảy ra của vấn đề kết xuất của bạn có thể là do các đường dẫn tương đối bạn đang sử dụng cho tệp và hình ảnh CSS. Đầu tiên, cố gắng sử dụng các đường dẫn tuyệt đối. Thực tế là cấu trúc HTML được hiển thị loại trừ các vấn đề với việc tạo tài liệu HTML mới. Ngoài ra, thêm

function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
3 cho đến
function Popup(data) {
      var mywindow = window.open('', 'new div', 'height=400,width=600');
      mywindow.document.write('<html><head><title></title>');
      mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
      mywindow.document.write('</head><body >');
      mywindow.document.write(data);
      mywindow.document.write('</body></html>');
      mywindow.document.close();
      mywindow.focus();
      setTimeout(function(){mywindow.print();},1000);
      mywindow.close();

      return true;
}
4Euity.

Mã này hoạt động, mặc dù một phần:

    (function() {

function createPopup( data ) {
    var mywindow = window.open( "", "new div", "height=400,width=600" );
    mywindow.document.write( "<html><head><title></title>" );
    mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" );
    mywindow.document.write( "</head><body >" );
    mywindow.document.write( data );
    mywindow.document.write( "</body></html>" );

    mywindow.print();
    //mywindow.close();

    return true;

}
document.addEventListener( "DOMContentLoaded", function() {
    document.getElementById( "print" ).addEventListener( "click", function() {
        createPopup( document.getElementById( "content" ).innerHTML );

    }, false );

});

   })();

Tôi đã xóa cuộc gọi .close (). Hãy nhớ rằng một số kiểu CSS có thể không hoạt động với in.

Đã trả lời ngày 27 tháng 1 năm 2014 lúc 11:44Jan 27, 2014 at 11:44

3

       function printpage() {
           var getpanel = document.getElementById("<%= Panel1.ClientID%>");
           var MainWindow = window.open('', '', 'height=500,width=800');
           MainWindow.document.write('<html><head><title></title>');
           MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
           MainWindow.document.write('</head><body onload="window.print();window.close()">');
           MainWindow.document.write(getpanel.innerHTML);
           MainWindow.document.write('</body></html>');
           MainWindow.document.close();
           setTimeout(function () {
               MainWindow.print();
           }, 500)
           return false;

}

Đã trả lời ngày 1 tháng 11 năm 2017 lúc 13:29Nov 1, 2017 at 13:29

Hướng dẫn html print div with css - html in div với css

1

Vượt qua div để được in, như một đầu vào cho chức năng in,

<input type='button' id='btn-print' value='Print Receipt' onclick="printDiv('#invoice-box-id');" />

Sau đó nhân bản yếu tố,

function printDiv(elem)
{
   renderMe($('<div/>').append($(elem).clone()).html());
}

Vượt qua yếu tố nhân bản để kết xuất, bao gồm bảng kiểu trong đó.

function renderMe(data) {
    var mywindow = window.open('', 'invoice-box', 'height=1000,width=1000');
    mywindow.document.write('<html><head><title>invoice-box</title>');
    mywindow.document.write('<link rel="stylesheet" href="printstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

Nếu bên trong được thông qua, nó sẽ bỏ qua các kiểu.

Đã trả lời ngày 27 tháng 7 năm 2019 lúc 6:36Jul 27, 2019 at 6:36

Hướng dẫn html print div with css - html in div với css

Tôi đã kết hợp và đã làm việc này một cách hoàn hảo:

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head>');
    mywindow.document.write("<link href=\"../lib/bootstrap/css/bootstrap.min.css\" rel=\"stylesheet\"><link href=\"../css/core.css\" rel=\"stylesheet\"><link href=\"../css/components.css\" rel=\"stylesheet\"><link href=\"../css/icons.css\" rel=\"stylesheet\">")
    mywindow.document.write('</head><body >');
    mywindow.document.write(document.getElementById('printit').innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/


    setTimeout(function () {
    mywindow.print();
    mywindow.close();
    }, 1000)
    return true;
}

B. Đi

1.4264 huy hiệu vàng16 Huy hiệu bạc22 Huy hiệu đồng4 gold badges16 silver badges22 bronze badges

Đã trả lời ngày 7 tháng 12 năm 2019 lúc 11:03Dec 7, 2019 at 11:03

Làm cách nào để in một div cụ thể trong HTML?

Để in nội dung của Div trong JavaScript, trước tiên hãy lưu trữ nội dung của Div trong biến JavaScript và sau đó nút in được nhấp. Nội dung của phần tử HTML div được trích xuất.first store the content of div in a JavaScript variable and then the print button is clicked. The contents of the HTML div element to be extracted.

@Media in CSS là gì?

Quy tắc này cho phép bạn chỉ định phong cách khác nhau cho các phương tiện khác nhau.Vì vậy, bạn có thể xác định các quy tắc khác nhau cho màn hình và máy in.Ví dụ dưới đây chỉ định các họ phông chữ khác nhau cho màn hình và in.CSS tiếp theo sử dụng cùng kích thước phông chữ cho cả hai màn hình cũng như máy in.allows you to specify different style for different media. So, you can define different rules for screen and a printer. The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer.

Làm thế nào để bạn in một cái gì đó trong CSS?

Những công cụ phát triển.Các devtools (F12 hoặc CMD/Ctrl + Shift + I) có thể mô phỏng các kiểu in, mặc dù việc ngắt trang sẽ không được hiển thị.Trong Chrome, hãy mở các công cụ nhà phát triển và chọn nhiều công cụ hơn, sau đó hiển thị từ menu biểu tượng ba chấm ở trên cùng bên phải.Thay đổi phương tiện mô phỏng CSS để in ở dưới cùng của bảng điều khiển đó.The DevTools ( F12 or Cmd/Ctrl + Shift + I ) can emulate print styles, although page breaks won't be shown. In Chrome, open the Developer Tools and select More Tools, then Rendering from the three-dot icon menu at the top right. Change the Emulate CSS Media to print at the bottom of that panel.

Làm cách nào để in một div trong chrome?

Hãy chắc chắn rằng bạn giữ.Tiện ích mở rộng HTML.Sau đó, đi đến vị trí bạn đã lưu nó vào, nhấp chuột phải và chọn "Mở bằng" và sau đó chọn Google Chrome từ cửa sổ bật lên hiển thị.Sau đó, một khi tệp đã mở trong Chrome, nhấn Ctrl (hoặc lệnh) + P và in tài liệu.press CTRL (or Command) + P, and print the document.