堆栈内存溢出
  简体   繁体   English

使用 Jquery 打印 div 内容

[英]Print a div content using Jquery

 原文  2015-11-16 10:07:34  6   14    javascript/ jquery/ html/ printing

问题描述

I want to print the content of a div using jQuery.我想使用 jQuery 打印 div 的内容。 This question is already asked in SO, but I can't find the correct (working) answer.这个问题已经在 SO 中提出，但我找不到正确的（工作）答案。

This is is my HTML:这是我的 HTML：

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print'>
</div>
<p>Do not print.</p>

Here I want to print the content of the div printarea .这里我想打印 div printarea的内容。

I tried this:我试过这个：

$("#btn").click(function () {
    $("#printarea").print();
});

But it gives a console error when the button is clicked:但是单击按钮时会出现控制台错误：

Uncaught TypeError: $(...).print is not a function未捕获的类型错误：$(...).print 不是 function

But when I am trying to print the entire page using但是当我尝试使用打印整个页面时

window.print();

it is working.这是工作。 But I only want to print the content of a particular div.但我只想打印特定 div 的内容。 I saw the answer $("#printarea").print();我看到了答案$("#printarea").print(); in many places, but this is not working.在很多地方，但这不起作用。

14 个解决方案

解决方案1
 79 已采纳  2015-11-16 12:28:15

Some jQuery research has failed, so I moved to JavaScript (thanks for your suggestion Anders ).一些 jQuery 研究失败了，所以我转向了 JavaScript（感谢你的建议Anders ）。

And it is working well...它运行良好......

HTML HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printDiv();'>

JavaScript JavaScript

function printDiv() 
{

  var divToPrint=document.getElementById('DivIdToPrint');

  var newWin=window.open('','Print-Window');

  newWin.document.open();

  newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

  newWin.document.close();

  setTimeout(function(){newWin.close();},10);

}

解决方案2
 38  2015-11-16 10:11:40

https://github.com/jasonday/printThis https://github.com/jasonday/printThis

$("#myID").printThis();

Great Jquery plugin to do exactly what your after很棒的 Jquery 插件可以完全满足您的需求

解决方案3
 9  2015-11-16 10:30:29

If you want to do this without an extra plugin (like printThis ), I think this should work.如果你想在没有额外插件的情况下做到这一点（比如printThis ），我认为这应该可行。 The idea is to have a special div that will be printed, while everything else is hidden using CSS.这个想法是有一个特殊的 div 将被打印，而其他一切都使用 CSS 隐藏。 This is easier to do if the div is a direct child of the body tag, so you will have to move whatever you want to print to a div like that.如果 div 是 body 标签的直接子代，这更容易做到，因此您必须将要打印的任何内容移动到这样的 div 中。 S So begin with creating a div with id print-me as a direct child to your body tag. S 所以首先创建一个 id 为print-me的 div 作为你的 body 标签的直接子元素。 Then use this code to print the div:然后使用此代码打印 div：

$("#btn").click(function () {
    //Copy the element you want to print to the print-me div.
    $("#printarea").clone().appendTo("#print-me");
    //Apply some styles to hide everything else while printing.
    $("body").addClass("printing");
    //Print the window.
    window.print();
    //Restore the styles.
    $("body").removeClass("printing");
    //Clear up the div.
    $("#print-me").empty();
});

The styles you need are these:您需要的样式是这些：

@media print {
    /* Hide everything in the body when printing... */
    body.printing * { display: none; }
    /* ...except our special div. */
    body.printing #print-me { display: block; }
}

@media screen {
    /* Hide the special layer from the screen. */
    #print-me { display: none; }
}

The reason why we should only apply the @print styles when the printing class is present is that the page should be printed as normally if the user prints the page by selecting File -> Print .我们应该只在printing类存在时应用@print样式的原因是，如果用户通过选择File -> Print来打印页面，则页面应该正常File -> Print 。

解决方案4
 7  2015-11-16 10:14:03

Without using any plugin you can opt this logic.在不使用任何插件的情况下，您可以选择此逻辑。

$("#btn").click(function () {
    //Hide all other elements other than printarea.
    $("#printarea").show();
    window.print();
});

解决方案5
 7  2017-11-09 15:34:12

None of the solutions above work perfectly.They either loses CSS or have to include/edit external CSS file.上述解决方案都不是完美的。它们要么丢失 CSS，要么必须包含/编辑外部 CSS 文件。 I found a perfect solution that will not lose your CSS nor you have to edit/add external CSS.我找到了一个完美的解决方案，它不会丢失您的 CSS，您也不必编辑/添加外部 CSS。

HTML: HTML：

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p

Javascript: Javascript：

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }

解决方案6
 7  2018-11-14 08:44:46

Below code from codepen worked for me as I wanted,下面来自 codepen 的代码按我的意愿为我工作，

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

Here is a link codepen这是一个链接代码笔

解决方案7
 4  2018-03-16 11:23:48

use this library : Print.JS使用这个库： Print.JS

with this library you can print both HTML and PDF.使用此库，您可以打印 HTML 和 PDF。

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

解决方案8
 4  2019-08-14 18:22:53

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p> 
</div>
<input type='button' id='btn' value='Print' onlick="printDiv()">
<p>Do not print.</p>

function printDiv(){
        var printContents = document.getElementById("printarea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

This Above function should be load on same page.以上功能应该在同一页面上加载。

解决方案9
 3  2018-10-25 08:14:18

I update this function我更新了这个功能
now you can print any tag or any part of the page with its full style现在您可以使用完整样式打印任何标签或页面的任何部分
must include jquery.js file必须包含 jquery.js 文件

HTML HTML

<div id='DivIdToPrint'>
    <p>This is a sample text for printing purpose.</p>
</div>
<p>Do not print.</p>
<input type='button' id='btn' value='Print' onclick='printtag("DivIdToPrint");' >

JavaScript JavaScript

        function printtag(tagid) {
            var hashid = "#"+ tagid;
            var tagname =  $(hashid).prop("tagName").toLowerCase() ;
            var attributes = ""; 
            var attrs = document.getElementById(tagid).attributes;
              $.each(attrs,function(i,elem){
                attributes +=  " "+  elem.name+" ='"+elem.value+"' " ;
              })
            var divToPrint= $(hashid).html() ;
            var head = "<html><head>"+ $("head").html() + "</head>" ;
            var allcontent = head + "<body  onload='window.print()' >"+ "<" + tagname + attributes + ">" +  divToPrint + "</" + tagname + ">" +  "</body></html>"  ;
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.document.write(allcontent);
            newWin.document.close();
           // setTimeout(function(){newWin.close();},10);
        }

解决方案10
 2  2017-02-13 22:02:21

I tried all the non-plugin approaches here, but all caused blank pages to print after the content, or had other problems.我在这里尝试了所有非插件方法，但都导致在内容之后打印空白页，或者有其他问题。 Here's my solution:这是我的解决方案：

Html:网址：

<body>
<div id="page-content">        
    <div id="printme">Content To Print</div>
    <div>Don't print this.</div>
</div>
<div id="hidden-print-div"></div>
</body>

Jquery:查询：

    $(document).ready(function () {
        $("#hidden-print-div").html($("#printme").html());
    });

Css: css：

    #hidden-print-div {
        display: none;
    }

    @media print {
        #hidden-print-div {
            display: block;
        }

        #page-content {
            display: none;
        }
    }

解决方案11
 2  2020-07-30 07:57:42

First include the header首先包含标题

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

<script type="text/JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.6.0/jQuery.print.js"></script>

As you are using a print function with a selector which is a part of print.js so you need to call them before you use it...当您使用带有选择器的打印函数时，它是 print.js 的一部分，因此您需要在使用之前调用它们...

Else 
    window.print()

will do it会做的

$("#btn").click(function () {
    $("#printarea").print();
});

or或者

$("#btn").on('click',function () {
    $("#printarea").print();
});

解决方案12
 1  2015-11-16 10:12:08

Take a Look at this Plugin看看这个插件

Makes your code as easy as -> $('SelectorToPrint').printElement();使您的代码尽可能简单 -> $('SelectorToPrint').printElement();

解决方案13
 1  2017-03-27 08:04:40

Print only selected element on codepen仅在 codepen 上打印选定的元素

HTML: HTML：

<div class="print">
 <p>Print 1</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

<div class="print">
 <p>Print 2</p>
 <a href="#" class="js-print-link">Click Me To Print</a>
</div>

JQuery:查询：

$('.js-print-link').on('click', function() {
  var printBlock = $(this).parents('.print').siblings('.print');
  printBlock.hide();
  window.print();
  printBlock.show();
});

解决方案14
 0  2022-07-25 12:01:17

CSS CODE CSS 代码

<style type="text/css">
    table {border-collapse: collapse; width: 100%; margin-bottom: 10px; width: 450px;}
    table, th, td {border: 1px solid #000000;}
    @media print {
        .print-btn{
            display: none;
        }
    }
</style>

HTML CODE HTML 代码

<table>
    <tbody>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>      
            <th>Points</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>      
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>        
            <td>94</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>        
            <td>80</td>
        </tr>
        <tr>
            <td>Adam</td>
            <td>Johnson</td>        
            <td>67</td>
        </tr>
    </tbody>
</table>
<button class="print-btn" onclick="window.print()">Print me</button>

OUTPUT OUTPUT 在此处输入图像描述

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery打印隐藏的div内容？ - How to print a hidden div content using jquery? 通过JQuery打印DIV内容 - Print DIV content by JQuery 具体如何打印 <div> javascript或jquery在新窗口中显示内容？ - How to print the specific <div> content in new window using javascript or jquery? 使用javascript打印DIV的内容 - Print the content of the DIV using javascript 使用 AngularJs 打印 Div 内容 - Print Div Content Using AngularJs 使用jQuery替换div内容 - Replace div content using jQuery 使用jQuery刷新div内容 - Refresh div content using jQuery 使用jquery重新加载div内容 - Reloading div content using jquery 使用Jquery更改div中的内容 - Using Jquery to change content in a div 使用jquery添加div内容 - Add div content using jquery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM