如何使用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