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

Question

我想使用print（）函数来打印<div class="pagecontent"></div>

我知道你可以做像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元素可见，但其中的任何内容仍然可以从*规则中隐藏。 您必须使用此功能并仅列出应隐藏的顶级元素。

Answer 2

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

HTML -

<span>Print Just Me.</span> I'll be omitted.<br />
<iframe id="iframe"></iframe>

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'+'><head><link href="cssreference" rel="stylesheet" type="text/css" /></head><'+'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 类型

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

问题描述

6 个解决方案

解决方案1
3 2012-03-15 16:42:28

解决方案2
2 2012-03-15 16:46:35

解决方案3
1 2012-03-15 16:41:27

解决方案4
1 2012-03-15 16:58:05

解决方案5
0 2012-03-15 16:41:52

解决方案6
0 2012-03-15 16:42:30

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

问题描述

6 个解决方案

解决方案1 3 2012-03-15 16:42:28

解决方案2 2 2012-03-15 16:46:35

解决方案3 1 2012-03-15 16:41:27

解决方案4 1 2012-03-15 16:58:05

解决方案5 0 2012-03-15 16:41:52

解决方案6 0 2012-03-15 16:42:30

解决方案1
3 2012-03-15 16:42:28

解决方案2
2 2012-03-15 16:46:35

解决方案3
1 2012-03-15 16:41:27

解决方案4
1 2012-03-15 16:58:05

解决方案5
0 2012-03-15 16:41:52

解决方案6
0 2012-03-15 16:42:30