打印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);
}
其他回答
注意:这只适用于启用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会导致丢失样式。但大多数时候我们得到的是内容。
function printdiv(printdivname) {
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
这将打印您想要的div区域,并将内容设置为原来的内容。Printdivname是要打印的div。
虽然@BC的答案最好打印一页。
但要打印多页A4大小的同时按ctrl+P以下解决方案可能会有所帮助。
@media print{
html *{
height:0px!important;
width:0px !important;
margin: 0px !important;
padding: 0px !important;
min-height: 0px !important;
line-height: 0px !important;
overflow: visible !important;
visibility: hidden ;
}
/*assing myPagesClass to every div you want to print on single separate A4 page*/
body .myPagesClass {
z-index: 100 !important;
visibility: visible !important;
position: relative !important;
display: block !important;
background-color: lightgray !important;
height: 297mm !important;
width: 211mm !important;
position: relative !important;
padding: 0px;
top: 0 !important;
left: 0 !important;
margin: 0 !important;
orphans: 0!important;
widows: 0!important;
overflow: visible !important;
page-break-after: always;
}
@page{
size: A4;
margin: 0mm ;
orphans: 0!important;
widows: 0!important;
}}
有点晚了,但我发现这真的很好!!
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
创建一个单独的打印样式表,隐藏除要打印的内容之外的所有其他元素。当你加载它时,使用'media="print"标记它:
<link rel=“stylesheet” type=“text/css” media=“print” href=“print.css” />
这允许您为打印输出加载一个完全不同的样式表。
如果你想强制浏览器的打印对话框出现在页面上,你可以在加载时使用JQuery这样做:
$(function() {window.print();});
或者由你想要的任何其他事件触发,比如用户点击一个按钮。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- jQuery:执行同步AJAX请求