在JavaScript中打印div标签的内容而不使用弹出窗口

6l7fqoea  于 2023-04-28  发布在  Java
关注(0)|答案(6)|浏览(189)

我很难在没有弹出窗口的情况下打印div标签的内容
我的代码目前看起来是这样的

var DocumentContainer = document.getElementById('print');

        var WindowObject = window.open('', 'Completed Registration Form', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

        WindowObject.document.writeln(DocumentContainer.innerHTML);

        WindowObject.document.close();

        WindowObject.focus();

        WindowObject.print();

        WindowObject.close();

下面使用了一个弹出窗口,有没有办法不使用弹出窗口这样做。

idfiyjo8

idfiyjo81#

有一种更有效的方法-不需要jQuery或任何其他库
这个想法是用隐藏的iframe替换窗口,并打印iframe的内容。
下面是代码:

function ClickHereToPrint(){
      try{
        var oIframe = document.getElementById('ifrmPrint');
        var oContent = document.getElementById('divToPrint').innerHTML;
        var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
        if (oDoc.document) oDoc = oDoc.document;
        oDoc.write('<head><title>title</title>');
        oDoc.write('</head><body onload="this.focus(); this.print();">');
        oDoc.write(oContent + '</body>');
        oDoc.close();
      } catch(e){
        self.print();
      }
    }

这意味着你的页面中有一个iframe。如果没有,只需使用以下命令创建一个:document.createElement('iframe')

nukf8bse

nukf8bse2#

试试这个功能-

function PrintDiv(divid,title) {
    var contents = document.getElementById(divid).innerHTML;
    var frame1 = document.createElement('iframe');
    frame1.name = "frame1";
    frame1.style.position = "absolute";
    frame1.style.top = "-1000000px";
    document.body.appendChild(frame1);
    var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
    frameDoc.document.open();
     frameDoc.document.write(`<html><head><title>${title}</title>`);
    frameDoc.document.write('</head><body>');
    frameDoc.document.write(contents);
    frameDoc.document.write('</body></html>');
    frameDoc.document.close();
    setTimeout(function () {
        window.frames["frame1"].focus();
        window.frames["frame1"].print();
        document.body.removeChild(frame1);
    }, 500);
    return false;
}

小提琴链接

https://jsfiddle.net/rtg37u94/

enyaitl3

enyaitl34#

这里列出的所有答案都使用文档。写这是不好的做法,即使是对一个临时iframe。
try:https://github.com/jasonday/printThis
它允许您引入页面样式,并允许使用一个额外的样式表,而无需文档。写。

nhn9ugyo

nhn9ugyo5#

你说“这个”是什么意思?“this”是打开一个窗口并写入其中的代码。如果你想通过不使用弹出窗口来做“这件事”,那么问题中就没有什么了。
是否尝试将<div>的内容写入当前文档?那就这么做吧!

var DocumentContainer = document.getElementById('print');
var WindowObject = window.open('', 'Completed Registration Form', <args>);
document.writeln(DocumentContainer.innerHTML);

否则,你需要更具体地说明你想做什么。

编辑哦,那 * 类型的印刷!现在还有人这么做吗

$('#print').print();

在jQuery中,使用behowdle 89链接到的technique
你知道,我想你的用户会想知道为什么他们的屏幕上突然出现了一个打印对话框,和/或为什么他们的打印机突然在没有通知的情况下嗡嗡作响。我建议把用户发送到PDF,如果他们喜欢,他们可以自己打印,或者保存到硬盘上,如果他们有更多的感觉。

42fyovps

42fyovps6#

这篇文章有答案
print div content from user control without opening a new window
你也许可以生成一个CSS文件,它排除了所有的东西,除了,下面几行中的东西:

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

把这样的东西印出来。css:

* { display: none; }
#specialdiv { display: block; }

相关问题