欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js代码调用chrome打印

程序员文章站 2022-06-19 16:47:13
...

js代码调用chrome打印
项目中需要使用js来调用打印功能

html部分:

<button id="btn-success" onclick="printpage()">打印</button>

js部分

function printpage(){    
	document.getElementById("btn-success").style="display:none";
	window.print(); 
	document.getElementById("btn-success").style="display:inline";
	return false; 
}

按照上面的写法就可以调用打印,测试的chrome73版本,必须要在js方法代码块中才能调用(必须写function),不知道为什么。






下面部分是参考:
js代码调用chrome打印
之前代码写过打印,结果太长没有记录导致这次找的时候非常麻烦。写篇博客记录一下。

  1. 页面可以直接调用,如下

<button class=“btn btn-success” οnclick=“window.print()”>打印
用起来比较方便,chrome自带的打印工具。但是这个自带打印会默认选中全部内容。整个html上边所有代码,打印结果有点丑,百度了一下,分享一下大神们的代码:

//开始和结束以注释的方式插入到html页面上
<div id="dispatchOrder_wrap"></div>

js部分
bdhtml=window.document.body.innerHTML; //获取到页面html
sprnstr="";
eprnstr=""; //找到两个标签
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;//将页面重新改回原始样式
window.location.href=window.location.href; //此处是业务需要 由于有动态生成数据 直接返回样式会乱 所以手动刷新了一下
调用打印挺好用的,记录一下方便下次再用。
2. 跟小伙伴讨论的时候,发现了一个css属性,觉得挺实用,也记录一下

*{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:pointer;
}
让文字不能被选中,貌似是css3的属性。
来源:https://blog.csdn.net/yummry/article/details/79206123

相关标签: js 打印