打印DIV的内容

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

当前回答

我知道这是一个老问题，但我用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;
    }
  }

2013-01-06 22:17:46

其他回答

这是我的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);

2012-07-27 10:56:48

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

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;
          
}

2021-06-08 00:19:24

我认为有更好的解决办法。让你的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;
    }
}

2011-08-23 20:54:07

将Element传递给这个函数打印:

函数printElm(elm) { var orig = document.body.innerHTML; document.body.innerHTML = elm.outerHTML; print (); document.body.innerHTML = origin; ｝

2022-06-25 12:12:42

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

CSS媒体查询解决方案假设只有一个div要打印。 javascript解决方案只适用于特定的浏览器。破坏父窗口内容并重新创建会造成混乱。

我改进了上面的解决方案。下面是我测试过的一种方法，效果非常好，有以下好处。

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

注意事项:

必须在新创建的窗口上有一个onload="window.print()"。不要从父类调用targetwindow.close()或targetwindow.print()。确保执行targetwindow.document.close()和target.focus() 我使用的是jquery，但你也可以使用简单的javascript做同样的技术。你可以在这里看到它的行动https://math.tools/table/multiplication。通过单击框头上的打印按钮，可以分别打印每个表。

2015-10-20 15:57:18

打印DIV的内容

推荐文章

最新文章

标签