打印DIV的内容

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

当前回答

function printDomElement(element) {
    element.classList.add("printCss");

    let printId = "printId";
    let name = ".printCss";
    let rules = "-webkit-print-color-adjust:exact;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;";

    var style = document.createElement('style');
    style.id = printId;
    style.media = "print";
    document.getElementsByTagName('head')[0].appendChild(style);

    if (!(style.sheet || {}).insertRule)(style.styleSheet || style.sheet).addRule(name, rules);
    else style.sheet.insertRule(name + "{" + rules + "}", 0);

    window.print();

    setTimeout(() => {
      element.classList.remove("printCss");
      let elem = document.getElementById(printId);
      if (elem) elem.remove();
    }, 500);

  }

2022-08-17 04:11:12

其他回答

注意:这只适用于启用jQuery的站点

这个很酷的技巧非常简单。它在谷歌Chrome浏览器中为我工作。火狐不允许你在没有插件的情况下打印PDF文件。

首先，使用(Ctrl + Shift + I) / (Cmd + Option + I)打开检查器。在控制台中输入以下代码:

var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours

它启动打印对话框。打印出来或者保存成PDF格式(chrome)。完成了!

逻辑很简单。我们正在创建一个新的脚本标记，并将其附加在关闭主体标记的前面。我们在HTML中注入了一个jQuery打印扩展。用你自己的Div标签ID更改myDivWithStyles。现在它负责准备一个可打印的虚拟窗口。

在任何网站上尝试一下。唯一需要注意的是，有时巧妙地编写CSS会导致丢失样式。但大多数时候我们得到的是内容。

2017-12-07 10:02:16

注意:从下面提到的插件编写到现在已经有13年了，就像评论中提到的那样。它不再工作，因为改变了API在jQuery。随意分叉和添加一个拉请求!

虽然这是@gabe说的，如果你正在使用jQuery，你可以使用我的printElement插件。

这里有一个示例，以及关于插件的更多信息。

使用方法相当简单，只需用jQuery选择器抓取一个元素并打印它:

$("#myDiv").printElement();

我希望这能有所帮助!

2010-09-26 14:57:54

与早期版本相比略有变化-在CHROME上测试

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

2010-02-12 22:06:18

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

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

我修改了@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

打印DIV的内容

推荐文章

最新文章

标签