如何使用JavaScript在div上打印内容？

我想使用print（）函数来打印

我知道你可以做像onClick="window.print()"这样的东西，但这打印整个窗口…我只想打印.pagecontent的内容。

使用JavaScript或jQuery进行此操作最简单的方法是什么？

Answer 1

最简单的方法是定义适用于@media=print的样式表。 它基本上会有类似的东西：

 * { display: none; /* hide all elements when printing */ } .pageContent { display: block; /* make any class="pageContent" elements visible while printing */ } 

当然，这会使pageContent元素可见，但其中的任何内容仍然可以从*规则中隐藏。 您必须使用此function并仅列出应隐藏的顶级元素。

Answer 2

您可以将元素的内容添加到iframe，然后打印iframe。

HTML –

 Print Just Me. I'll be omitted.
 ​ 

JS –

 $('span').on('click', function () { $('#iframe').contents().find('body').html($(this).html()); window.frames['iframe'].print(); });​ 

这是一个演示： http ： //jsfiddle.net/zaF3K/

您还可以隐藏iframe，以便在幕后进行：

 #iframe { display : none; }​ 

这是一个演示： http ： //jsfiddle.net/zaF3K/1/

Answer 3

有jqprint jquery插件，看一看

http://archive.plugins.jquery.com/project/jqPrint

Answer 4

如果你想使用javascript而不是试试这个

  window.printItn = function() { var printContent = document.getElementById('pagecontent'); var windowUrl = 'about:blank'; var uniqueName = new Date(); var windowName = 'Print' + uniqueName.getTime(); // you should add all css refrence for your html. something like. var WinPrint= window.open(windowUrl,windowName,'left=300,top=300,right=500,bottom=500,width=1000,height=500'); WinPrint.document.write('<'+'html'+'><'+'body style="background:none !important"'+'>'); WinPrint.document.write(printContent.innerHTML); WinPrint.document.write('<'+'/body'+'><'+'/html'+'>'); WinPrint.document.close(); WinPrint.focus(); WinPrint.print(); WinPrint.close(); } 

参见演示 ： http ： //jsfiddle.net/mu8BG/1/

Answer 5

您可以使用innerHTML获取div的内容并将其存储为字符串，然后单独打印或记录该片段。

 var string_to_print = $('#pagecontent').html(); 

http://api.jquery.com/html/

Answer 6

使用纯javascript你不能，但你可以使用media print CSS 类型