打印DIV内容的最佳方法是什么?
当前回答
公认的解决方案不起作用。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;
}
其他回答
注意:从下面提到的插件编写到现在已经有13年了,就像评论中提到的那样。它不再工作,因为改变了API在jQuery。随意分叉和添加一个拉请求!
虽然这是@gabe说的, 如果你正在使用jQuery,你可以使用我的printElement插件。
这里有一个示例,以及关于插件的更多信息。
使用方法相当简单,只需用jQuery选择器抓取一个元素并打印它:
$("#myDiv").printElement();
我希望这能有所帮助!
我修改了@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();
下面是一个适用于IE和Chrome的IFrame解决方案:
function printHTML(htmlString) {
var newIframe = document.createElement('iframe');
newIframe.width = '1px';
newIframe.height = '1px';
newIframe.src = 'about:blank';
// for IE wait for the IFrame to load so we can access contentWindow.document.body
newIframe.onload = function() {
var script_tag = newIframe.contentWindow.document.createElement("script");
script_tag.type = "text/javascript";
var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
script_tag.appendChild(script);
newIframe.contentWindow.document.body.innerHTML = htmlString;
newIframe.contentWindow.document.body.appendChild(script_tag);
// for chrome, a timeout for loading large amounts of content
setTimeout(function() {
newIframe.contentWindow.Print();
newIframe.contentWindow.document.body.removeChild(script_tag);
newIframe.parentElement.removeChild(newIframe);
}, 200);
};
document.body.appendChild(newIframe);
}
打开一个新窗口 打开新窗口的文档对象,并在其中写入一个简单的文档,其中只包含您已经获得的div和必要的html头文件等-您可能还希望将文档拉入样式表,这取决于您的内容是什么 在新页面中放入一个脚本来调用window.print() 触发脚本
在Opera中,试试:
print_win.document.write('</body></html>');
print_win.document.close(); // This bit is important
print_win.print();
print_win.close();
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求