打印DIV内容的最佳方法是什么?
当前回答
与最佳答案相同,以防你需要像我一样打印图像:
如果你想打印图像:
function printElem(elem)
{
Popup(jQuery(elem).attr('src'));
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<img src="'+data+'" />');
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
其他回答
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);
}
打开一个新窗口 打开新窗口的文档对象,并在其中写入一个简单的文档,其中只包含您已经获得的div和必要的html头文件等-您可能还希望将文档拉入样式表,这取决于您的内容是什么 在新页面中放入一个脚本来调用window.print() 触发脚本
注意:从下面提到的插件编写到现在已经有13年了,就像评论中提到的那样。它不再工作,因为改变了API在jQuery。随意分叉和添加一个拉请求!
虽然这是@gabe说的, 如果你正在使用jQuery,你可以使用我的printElement插件。
这里有一个示例,以及关于插件的更多信息。
使用方法相当简单,只需用jQuery选择器抓取一个元素并打印它:
$("#myDiv").printElement();
我希望这能有所帮助!
创建一个单独的打印样式表,隐藏除要打印的内容之外的所有其他元素。当你加载它时,使用'media="print"标记它:
<link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” />
这允许您为打印输出加载一个完全不同的样式表。
如果你想强制浏览器的打印对话框出现在页面上,你可以在加载时使用JQuery这样做:
$(function() {window.print();});
或者由你想要的任何其他事件触发,比如用户点击一个按钮。
我认为目前提出的解决方案有以下缺点:
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。通过单击框头上的打印按钮,可以分别打印每个表。
<script id="print-header" type="text/x-jquery-tmpl"> <html> <header> <title>Printing Para {num}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { max-width: 300px; } </style> </header> <body onload="window.print()"> <h2>Printing Para {num} </h2> <h4>https://math.tools</h4> </script> <script id="print-footer" type="text/x-jquery-tmpl"> </body> </html> </script> <script> $('.printthis').click(function() { num = $(this).attr("data-id"); w = window.open(); w.document.write( $("#print-header").html().replace("{num}",num) + $("#para-" + num).html() + $("#print-footer").html() ); w.document.close(); w.focus(); //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window. ///w.close(); Don't do this otherwise chrome won't work }); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a> <a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a> <p class="para" id="para-1"> Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p class="para" id="para-2"> Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求