打印DIV的内容

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

当前回答

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

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

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。

2012-12-04 06:23:00

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

如果你想打印图像:

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

2013-10-17 19:38:26

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

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

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

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

推荐文章

最新文章

标签