打印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

其他回答

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

如果这不是一个选项，你可以尝试使用客户端语言，如javascript隐藏页面上的所有内容，除了div，然后打印页面…

2010-02-12 21:45:48

我编写了一个插件来解决这种情况。我对现有的插件不满意，开始做一些更广泛/可配置的东西。

https://github.com/jasonday/printThis

2013-03-10 23:39:57

公认的解决方案不起作用。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;
    }

2016-11-02 21:15:20

我修改了@BillPaetski答案使用querySelector，添加可选的CSS，删除强制H1标签，并使标题可选地指定或从窗口拉出。它也不再自动打印，并公开内部内容，以便它们可以在包装器函数中切换或随你喜欢。

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

Code:

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

Usage:

DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();

2017-02-15 10:17:09

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

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的内容

推荐文章

最新文章

标签