发表新帖
发表新帖

Print
only?

前端 未结
关注
30 1645
暖寄归人
暖寄归人 2020-11-22 00:25

How do I print the indicated div (without manually disabling all other content on the page)?

I want to avoid a new preview dialog, so creating a new window with this

相关标签:
30条回答
  • 佛祖请我去吃肉
    2020-11-22 00:29

    With jQuery it's as simple as this:

    w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
    0 讨论(0)
  • 我寻月下人不归
    2020-11-22 00:30

    Best css to fit space empty height:

    @media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
    0 讨论(0)
  • 栀梦
    2020-11-22 00:30

    You could use a separate CSS style which disables every other content except the one with the id "printarea".

    See CSS Design: Going to Print for further explanation and examples.

    0 讨论(0)
  • 执笔经年
    2020-11-22 00:30

    One more approch without affecting current page and it also persist the css while printing. Here selector must be specific div selector which content we need to print.

    printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

    Here provided some time out show that external css get applied to it.

    0 讨论(0)
  • 野趣味
    2020-11-22 00:31

    With CSS 3 you could use the following:

    body *:not(#printarea) {
    display: none;
}
    0 讨论(0)
  • 情书的邮戳
    2020-11-22 00:34

    Use a special Stylesheet for printing

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />

    and then add a class i.e. "noprint" to every tag which's content you don't want to print.

    In the CSS use 

    .noprint {
  display: none;
}
    0 讨论(0)
 看不清?
提交回复
热议问题