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


当前回答

这应该可以工作:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
}

其他回答

将Element传递给这个函数打印:

函数printElm(elm) { var orig = document.body.innerHTML; document.body.innerHTML = elm.outerHTML; print (); document.body.innerHTML = origin; }

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

https://github.com/jasonday/printThis

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

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

打开一个新窗口 打开新窗口的文档对象,并在其中写入一个简单的文档,其中只包含您已经获得的div和必要的html头文件等-您可能还希望将文档拉入样式表,这取决于您的内容是什么 在新页面中放入一个脚本来调用window.print() 触发脚本

注意:这只适用于启用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会导致丢失样式。但大多数时候我们得到的是内容。