logo标签列表

使用Javascript在不弹出窗口的情况下打印div标签的内容

javascriptjquery
4

我正在努力打印一个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();

下面使用了弹出窗口，有没有不使用弹出窗口的方法。
1
为什么你想要打印出这段代码？在我能帮助你之前，我需要了解使用情况。 - Exelian
1
可能是如何使用JavaScript打印div的重复问题。 - Lightness Races in Orbit
6个回答
11

有一种更高效的方法 - 不需要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')

10

尝试这个函数-

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

Fiddle链接

https://jsfiddle.net/rtg37u94/

1

这里列出的所有答案都使用 document.write，这是一种不良实践，即使是对于临时 iframe 也是如此。

try: https://github.com/jasonday/printThis

它允许您拉取页面样式，同时允许使用附加样式表，而无需使用document.write。

0
你所说的“this”是什么意思？这里的“this”指的是打开一个窗口并在其中写入代码。如果你不想使用弹出窗口来实现“this”，那么问题就没有其他解决方法了。
你是想将
标签的内容写入当前文档吗？那就直接这样做！
var DocumentContainer = document.getElementById('print');
var WindowObject = window.open('', 'Completed Registration Form', <args>);
document.writeln(DocumentContainer.innerHTML);

否则，您需要更具体地说明您想要做什么。

编辑 哦，是那种打印！哇，人们还在做那个？

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

在jQuery中，使用behodle89链接的技巧。

你知道的，我想你的用户会想知道为什么他们突然在屏幕上看到打印对话框，或者为什么他们的打印机突然开始嗡嗡作响而没有通知。我建议将用户发送到PDF文件，如果他们喜欢，可以自行打印，或者如果他们更明智一些，可以保存到硬盘上。

我完全同意你的观点。客户希望它以特定的方式工作。我尝试使用document.getElementById('print').print();，但是出现了以下错误： 错误：document.getElementById("print").print不是一个函数。 - Elitmiar
@Roland：你需要跟随链接并阅读该技术页面。它展示了如何创建该函数。 - Lightness Races in Orbit
1
而且，就算这样做有什么价值...你应该告诉客户，专业人士已经说过，他们的客户/用户会非常快地感到非常恼怒。 - Lightness Races in Orbit
0

这篇文章有答案

打印用户控件中的div内容而不打开新窗口

您可以生成一个CSS文件，排除除了

之外的所有内容，类似于以下内容：

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

然后在print.css中放置类似这样的内容：

* { display: none; }
#specialdiv { display: block; }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接