堆栈内存溢出
  繁体   English   中英

打印 DIV 的内容

[英]Print the contents of a DIV

 原文  2010-02-12 21:37:42  2   31    javascript/ jquery/ html/ printing

问题描述

打印 DIV 内容的最佳方法是什么？

31 个解决方案

解决方案1
 599 已采纳  2010-02-12 22:06:18

与早期版本相比略有变化 - 在 CHROME 上测试

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

解决方案2
 201  2011-08-23 20:54:07

我认为有更好的解决方案。 让您的 div 打印覆盖整个文档，但仅在打印时：

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

解决方案3
 46  2010-09-26 14:57:54

尽管@gabe已经说过，但如果您使用的是 jQuery，则可以使用我的printElement插件。

这里有一个示例， 这里有关于插件的更多信息。

用法相当简单，只需使用 jQuery 选择器抓取一个元素并打印它：

$("#myDiv").printElement();

我希望它有帮助！

解决方案4
 32  2015-02-11 06:18:32

使用 Jquery，只需使用此功能：

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

您的打印按钮将如下所示：

<button id="print" onclick="printContent('id name of your div');" >Print</button>

编辑：如果您确实有需要保留的表单数据，则克隆不会复制它，因此您只需要获取所有表单数据并在还原后将其替换为：

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>

解决方案5
 21  2012-07-19 08:09:06

从这里https://forums.asp.net/t/1261525.aspx

<html> 
<head>
    <script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>

    <title>div print</title>

</head>

<body>
    //HTML Page //Other content you wouldn't like to print
    <input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

    <div id="div_print">
        <h1 style="Color:Red">The Div content which you want to print</h1>
    </div>
    //Other content you wouldn't like to print //Other content you wouldn't like to print
</body>    
</html>

解决方案6
 19  2015-12-05 11:41:50

我使用Bill Paetzke答案打印包含图像的 div，但它不适用于 google chrome

我只需要添加这一行myWindow.onload=function(){使其工作，这是完整的代码

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>

另外，如果有人只需要打印一个带有 id 的 div，他就不需要加载 jquery

这是执行此操作的纯 JavaScript 代码

<html>
<head>
    <script type="text/javascript">
        function PrintDiv(id) {
            var data=document.getElementById(id).innerHTML;
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>

我希望这可以帮助某人

解决方案7
 18  2012-12-04 06:23:00

function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

这将打印您想要的div区域并将内容设置回原样。 printdivname是要打印的div 。

解决方案8
 13  2010-02-12 21:51:46

创建一个单独的打印样式表，隐藏除您要打印的内容之外的所有其他元素。 加载时使用'media="print"对其进行标记：

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

这允许您为打印输出加载完全不同的样式表。

如果你想强制浏览器的打印对话框出现在页面上，你可以使用 JQuery 在加载时这样做：

$(function() { window.print(); });

或触发您想要的任何其他事件，例如用户单击按钮。

解决方案9
 12  2013-03-10 23:39:57

我编写了一个插件来解决这种情况。 我对那里的插件不满意，并着手制作更广泛/可配置的东西。

https://github.com/jasonday/printThis

解决方案10
 12  2015-10-20 15:57:18

我认为目前提出的解决方案有以下缺点：

  1. CSS 媒体查询解决方案假设只有一个 div 可以打印。
  2. javascript 解决方案仅适用于某些浏览器。
  3. 销毁父窗口内容并重新创建会造成混乱。

我对上述解决方案进行了改进。 这是我已经测试过的东西，它具有以下好处。

  1. 适用于所有浏览器，包括 IE、Chrome、Safari 和 firefox。
  2. 不破坏和重新加载父窗口。
  3. 可以在一页上打印任意数量的 DIV。
  4. 使用 HTML 模板来避免容易出错的字符串连接。

需要注意的要点：

  1. 必须在新创建的窗口上有一个 onload="window.print()" 。
  2. 不要从父级调用 targetwindow.close() 或 targetwindow.print()。
  3. 确保您执行 targetwindow.document.close() 和 target.focus()
  4. 我正在使用 jquery，但您也可以使用纯 javascript 执行相同的技术。
  5. 您可以在此处查看此操作https://math.tools/table/multiplication 。 您可以通过单击框标题上的打印按钮单独打印每个表格。 

 <script id="print-header" type="text/x-jquery-tmpl"> <html> <header> <title>Printing Para {num}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { max-width: 300px; } </style> </header> <body onload="window.print()"> <h2>Printing Para {num} </h2> <h4>https://math.tools</h4> </script> <script id="print-footer" type="text/x-jquery-tmpl"> </body> </html> </script> <script> $('.printthis').click(function() { num = $(this).attr("data-id"); w = window.open(); w.document.write( $("#print-header").html().replace("{num}",num) + $("#para-" + num).html() + $("#print-footer").html() ); w.document.close(); w.focus(); //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window. ///w.close(); Don't do this otherwise chrome won't work }); </script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a> <a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a> <p class="para" id="para-1"> Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="para" id="para-2"> Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

解决方案11
 7  2016-11-02 21:15:20

接受的解决方案不起作用。 Chrome 正在打印一个空白页，因为它没有及时加载图像。 这种方法有效：

编辑：看来接受的解决方案在我的帖子之后被修改了。 为什么投反对票？ 该解决方案也有效。

    function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

解决方案12
 4  2013-01-06 22:17:46

我知道这是一个老问题，但我用 jQuery 解决了这个问题。

function printContents(id) {
    var contents = $("#"+id).html();

    if ($("#printDiv").length == 0) {
      var printDiv = null;
      printDiv = document.createElement('div');
      printDiv.setAttribute('id','printDiv');
      printDiv.setAttribute('class','printable');
      $(printDiv).appendTo('body');
    }

    $("#printDiv").html(contents);

    window.print();

    $("#printDiv").remove();
}

CSS

  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
  }

解决方案13
 4  2018-03-15 14:26:05

如果您想拥有原始文档中的所有样式（包括内联样式），您可以使用这种方法。

  1. 复制完整的文件
  2. 用您要打印的元素替换正文。

执行：

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}

解决方案14
 3  2014-01-19 06:55:16

尽管@BC 的答案是打印单页的最佳选择。

但是要使用 ctrl+P 同时打印多页 A4 大小的页面，以下解决方案可能会有所帮助。

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}

解决方案15
 3  2010-02-12 21:53:28

  • 打开一个新窗口
  • 打开新窗口的文档对象并在其中写入一个简单的文档，其中只包含您拥有的 div 和必要的 html 标题等 - 您可能还希望将文档拉入样式表，具体取决于您的内容是
  • 在新页面中放一个脚本来调用window.print()
  • 触发脚本

解决方案16
 2  2012-07-27 10:56:48

这是我的 jquery 打印插件

(function ($) {

$.fn.printme = function () {
    return this.each(function () {
        var container = $(this);

        var hidden_IFrame = $('<iframe></iframe>').attr({
            width: '1px',
            height: '1px',
            display: 'none'
        }).appendTo(container);

        var myIframe = hidden_IFrame.get(0);

        var script_tag = myIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
        script_tag.appendChild(script);

        myIframe.contentWindow.document.body.innerHTML = container.html();
        myIframe.contentWindow.document.body.appendChild(script_tag);

        myIframe.contentWindow.Print();
        hidden_IFrame.remove();

    });
};
})(jQuery);

解决方案17
 2  2014-05-19 00:04:09

这是适用于 IE 和 Chrome 的 IFrame 解决方案：

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}

解决方案18
 2  2017-12-07 10:02:16

注意：这仅适用于启用 jQuery 的网站

这个很酷的技巧非常简单。 它在Google Chrome浏览器中对我有用。 Firefox 不允许您在没有插件的情况下打印为 PDF。

  1. 首先，使用 (Ctrl + Shift + I) / (Cmd + Option + I) 打开检查器。
  2. 在控制台中键入此代码：
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
  1. 它启动打印对话框。 进行物理打印或将其保存为 PDF（在 chrome 中）。 完毕！

逻辑很简单。 我们正在创建一个新的脚本标签并将其附加在结束正文标签的前面。 我们在 HTML 中注入了一个 jQuery 打印扩展。 使用您自己的 Div 标签 ID 更改myDivWithStyles 。 现在它负责准备可打印的虚拟窗口。

在任何网站上尝试。 唯一需要注意的是，有时复杂的 CSS 会导致样式丢失。 但我们大多数时候都会得到内容。

解决方案19
 2  2021-01-29 10:25:58

只需使用PrintJS

let printjs = document.createElement("script");
printjs.src = "https://printjs-4de6.kxcdn.com/print.min.js";
document.body.appendChild(printjs);

printjs.onload = function (){
    printJS('id_of_div_you_want_to_print', 'html');
}

解决方案20
 2  2021-06-08 00:19:24

有点晚了，但我发现这真的很好！

function printDiv(divID) {
    //Get the HTML of div
    var divElements = document.getElementById(divID).innerHTML;
    //Get the HTML of whole page
    var oldPage = document.body.innerHTML;

    //Reset the page's HTML with div's HTML only
    document.body.innerHTML = 
       "<html><head><title></title></head><body>" + 
              divElements + "</body>";

    //Print Page
    window.print();

    //Restore orignal HTML
    document.body.innerHTML = oldPage;
          
}

解决方案21
 1  2013-02-19 18:02:05

在 Opera 中，尝试：

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();

解决方案22
 1  2016-04-02 11:29:17

创建了一些通用的东西，可以在任何 HTML 元素上使用

HTMLElement.prototype.printMe = printMe;
function printMe(query){             
     var myframe = document.createElement('IFRAME');
     myframe.domain = document.domain;
     myframe.style.position = "absolute";
     myframe.style.top = "-10000px";
     document.body.appendChild(myframe);
     myframe.contentDocument.write(this.innerHTML) ;
     setTimeout(function(){
        myframe.focus();
        myframe.contentWindow.print();
        myframe.parentNode.removeChild(myframe) ;// remove frame
     },3000); // wait for images to load inside iframe
     window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

希望这可以帮助。

解决方案23
 1  2017-02-15 10:17:09

我修改了@BillPaetski 答案以使用 querySelector、添加可选 CSS、删除强制 H1 标记并使标题可选地指定或从窗口中拉出。 它也不再自动打印并暴露内部结构，因此可以在包装器功能或您喜欢的情况下切换它们。

仅有的两个私有变量是 tmpWindow 和 tmpDoc，尽管我相信 title、css 和 elem 访问可能会有所不同，应该假设所有函数参数都是私有的。

代码： 
 function PrintElem(elem, title, css) { var tmpWindow = window.open('', 'PRINT', 'height=400,width=600'); var tmpDoc = tmpWindow.document; title = title || document.title; css = css || ""; this.setTitle = function(newTitle) { title = newTitle || document.title; }; this.setCSS = function(newCSS) { css = newCSS || ""; }; this.basicHtml5 = function(innerHTML) { return '<!doctype html><html>'+(innerHTML || "")+'</html>'; }; this.htmlHead = function(innerHTML) { return '<head>'+(innerHTML || "")+'</head>'; }; this.htmlTitle = function(title) { return '<title>'+(title || "")+'</title>'; }; this.styleTag = function(innerHTML) { return '<style>'+(innerHTML || "")+'</style>'; }; this.htmlBody = function(innerHTML) { return '<body>'+(innerHTML || "")+'</body>'; }; this.build = function() { tmpDoc.write( this.basicHtml5( this.htmlHead( this.htmlTitle(title) + this.styleTag(css) ) + this.htmlBody( document.querySelector(elem).innerHTML ) ) ); tmpDoc.close(); // necessary for IE >= 10 }; this.print = function() { tmpWindow.focus(); // necessary for IE >= 10*/ tmpWindow.print(); tmpWindow.close(); }; this.build(); return this; }
用法： 
 DOMPrinter = PrintElem('#app-container'); DOMPrinter.print();

解决方案24
 1  2021-04-14 13:39:14

这应该有效：

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

解决方案25
 1  2021-07-26 19:54:59

HTML > 头部

  <script type="text/javascript">
    function printDiv() {
        var divToPrint = document.getElementById('printArea');  
    //Firefox was just opening a new window with same content as opener and not performing the printing dialog, so needed to make it open a new instance of the window opener    
        newWin= window.open(self.location.href);
    //We want to format the document appropriately
       newWin.document.write("\<!DOCTYPE html\>\<html lang='es'\>\<head\>\<meta charset='utf-8'\/\>\<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'\>\<meta name='HandheldFriendly' content='true'\/\>");
    //HTML ELEMENTS THAT WE WANT TO HIDE FROM THE PRINTING AREA
        newWin.document.write("<style type='text/css'>@media print{.dataTables_info,.dataTables_filter{height:0!important;width:0!important;margin:0!important;padding:0!important;min-height:0!important;line-height:0!important;overflow:visible!important;visibility:hidden}");
    //General Styling for Printing
        newWin.document.write("body {z-index:100!important;visibility:visible!important;position:relative!important;display:block!important;background-color:lightgray!important;height:297mm!important;width:211mm!important;position:relative!important;padding:0;top:0!important;left:0!important;margin:0!important;orphans:0!important;widows:0!important;overflow:visible!important;page-break-after:always}");
    //Some forced styling in css rules includying page break for a div
        newWin.document.write("body h1{font-size:1em; font-family:Verdana;} a.marked{color:black; text-decoration:none} .pagebreak { page-break-before: always; } ");
        newWin.document.write("@page{size:A4; margin:2em; orphans:0!important;widows:0!important}}</style>\<\/head>\<body>");
        newWin.document.write(divToPrint.innerHTML);
        newWin.document.write("</body></html>");
        newWin.focus();
        newWin.print();
    }
    </script>

HTML > 正文

<div id="printArea">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<!-- Page break -->
<div class="pagebreak">&nbsp;</div>

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>

解决方案26
 0  2018-08-01 12:13:19

下面的代码复制了查询选择器所针对的所有相关节点，复制了它们在屏幕上看到的样式，因为用于定位 css 选择器的许多父元素将丢失。 如果有很多具有很多样式的子节点，这会导致一些延迟。

理想情况下，您应该准备好打印样式表，但这适用于没有要插入的打印样式表并且您希望在屏幕上看到的打印的用例。

如果您在此页面的浏览器控制台中复制以下项目，它将打印此页面上的所有代码片段。

+function() {
    /**
     * copied from  https://stackoverflow.com/questions/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };


    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }

    /** select elements to print with query selector **/
    var printSelection = function(querySelector) {
        // Create an iframe to make sure everything is clean and ordered.
        var iframe = document.createElement('iframe');
        // Give it enough dimension so you can visually check when modifying.
        iframe.width = document.width;
        iframe.height = document.height;
        // Add it to the current document to be sure it has the internal objects set up.
        document.body.append(iframe);

        var nodes = document.querySelectorAll(querySelector);
        if(!nodes || nodes.length == 0) {
           console.error('Printing Faillure: Nothing to print. Please check your querySelector');
           return;
        }

        for(i=0; i < nodes.length; i++) {

            // Get the node you wish to print.
            var origNode = nodes[i];

            // Clone it and all it's children
            var node = origNode.cloneNode(true);

            // Copy the base style.
            copyComputedStyle(origNode, node);

            if(origNode.children && origNode.children.length > 0) {
                buildChild(origNode.children, node.children);
            }

            // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.

            iframe.contentWindow.document.body.append(node);
        }
        // Print the window
        iframe.contentWindow.print();

        // Give the browser a second to gather the data then remove the iframe.
        window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
    }
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')

解决方案27
 0  2019-01-21 13:29:00

这是一个非常老的帖子，但这是我使用正确答案所做的更新。 我的解决方案也使用 jQuery。

这一点是使用正确的打印视图，包括所有样式表以进行正确的格式化，并且在大多数浏览器中都得到支持。

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

稍后你简单地需要这样的东西：

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

试试看。

解决方案28
 0  2022-06-25 12:12:42

将元素传递给此函数以打印： 

 function printElm(elm) { var orig = document.body.innerHTML; document.body.innerHTML = elm.outerHTML; print(); document.body.innerHTML = orig; }

解决方案29
 0  2022-08-17 04:11:12

function printDomElement(element) {
    element.classList.add("printCss");

    let printId = "printId";
    let name = ".printCss";
    let rules = "-webkit-print-color-adjust:exact;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;";

    var style = document.createElement('style');
    style.id = printId;
    style.media = "print";
    document.getElementsByTagName('head')[0].appendChild(style);

    if (!(style.sheet || {}).insertRule)(style.styleSheet || style.sheet).addRule(name, rules);
    else style.sheet.insertRule(name + "{" + rules + "}", 0);

    window.print();

    setTimeout(() => {
      element.classList.remove("printCss");
      let elem = document.getElementById(printId);
      if (elem) elem.remove();
    }, 500);

  }

解决方案30
 -1  2013-10-17 19:38:26

与最佳答案相同，以防您需要像我一样打印图像：

如果要打印图像：

function printElem(elem)
    {
        Popup(jQuery(elem).attr('src'));
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<img src="'+data+'" />');
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

解决方案31
 -5  2010-02-12 21:45:48

最好的方法是将 div 的内容提交到服务器并打开一个新窗口，服务器可以将这些内容放入新窗口中。

如果这不是一个选项，您可以尝试使用像 javascript 这样的客户端语言来隐藏页面上除该 div 之外的所有内容，然后打印页面......

暂无
暂无

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

相关问题 打印 div 的内容 - 使用样式表 在javascript中打印div内容 有没有办法打印特定DIV的内容 div 元素的 Svelte 打印内容 DIV样式表的打印内容不起作用 javascript打印只有特定的内容<div> 如何使用jQuery打印div内容 如何设置打印div标签的内容 如何仅在打印文件中显示 div 的内容？ 如何使用JavaScript在div上打印内容？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM