打印网页的特定部分

Question

我正在尝试打印我的应用程序的特定部分.

该应用程序有一个用户列表,显示他们的名字和姓氏.当我点击一个用户时,我会得到一个包含更多详细信息的弹出窗口.

如何为我点击的用户打印弹出窗口？弹出窗口如下所示:

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

但是打印按钮还没有工作.

Answer 1

您可以使用简单的JavaScript从页面打印特定的div.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();

Answer 2

您必须打开一个新窗口(或导航到新页面),其中只包含您希望用户能够打印的信息

Javscript:

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

这里有一些注意事项:锚点之间不能有空格和包含要打印内容的div

Answer 3

相反,所有复杂的JavaScript的,你其实可以简单的实现这一点CSS:只要使用两个CSS文件,一个为你的正常屏幕显示,而另一个用于的显示ONLY要打印的内容.在后一个文件中,隐藏您不想打印的所有内容,仅显示弹出窗口.

请记住定义media两个CSS文件的属性:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />

Answer 4

我制作了这个jQuery扩展来打印所选元素的HTML: $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

在这里看到它.

Answer 5

只需使用CSS即可隐藏您不想打印的内容。当用户选择print时，页面将在“ media =” print“ CSS上查找有关页面布局的说明。

该媒体=“打印” CSS按指示来隐藏我们不希望打印的内容。

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>

Answer 6

风格

 @media print {

       .no-print{
               display : none !important;
                }
              }

jQuery

    function printInvoice()
 {
     printDiv = "#printDiv"; // id of the div you want to print
     $("*").addClass("no-print");
     $(printDiv+" *").removeClass("no-print");
     $(printDiv).removeClass("no-print");

     parent =  $(printDiv).parent();
     while($(parent).length)
     {
         $(parent).removeClass("no-print");
         parent =  $(parent).parent();
     }
     window.print();

 }

打印按钮 HTML

<input type="button" onclick="printInvoice();" value="Print">