打印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;
}
其他回答
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);
}
与早期版本相比略有变化-在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;
}
创建一个单独的打印样式表,隐藏除要打印的内容之外的所有其他元素。当你加载它时,使用'media="print"标记它:
<link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” />
这允许您为打印输出加载一个完全不同的样式表。
如果你想强制浏览器的打印对话框出现在页面上,你可以在加载时使用JQuery这样做:
$(function() {window.print();});
或者由你想要的任何其他事件触发,比如用户点击一个按钮。
注意:从下面提到的插件编写到现在已经有13年了,就像评论中提到的那样。它不再工作,因为改变了API在jQuery。随意分叉和添加一个拉请求!
虽然这是@gabe说的, 如果你正在使用jQuery,你可以使用我的printElement插件。
这里有一个示例,以及关于插件的更多信息。
使用方法相当简单,只需用jQuery选择器抓取一个元素并打印它:
$("#myDiv").printElement();
我希望这能有所帮助!
最好的方法是将div的内容提交给服务器,并打开一个新窗口,服务器可以将这些内容放入新窗口中。
如果这不是一个选项,你可以尝试使用客户端语言,如javascript隐藏页面上的所有内容,除了div,然后打印页面…
推荐文章
- 向对象数组添加属性
- 如何在Redux应用程序中动态加载代码分割的减速器?
- Angular 2+和debounce
- 检测涡旋方向
- 在react native中隐藏/显示组件
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- console.log()和console.debug()的区别?
- 如何改变文本区域的边框颜色:焦点
- 如何在Python中逐行打印字典?
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 如何从给定的html字符串中删除前导和尾随空白?
- 如何为KnockoutJS调试模板绑定错误?
- 将一个二进制的NodeJS Buffer转换为JavaScript的ArrayBuffer