JS实现快递单打印功能【推荐】实现快递单打印功能【推荐】
最近做项目需要打印快递单,在网上搜索了一下发现直接给出代码的比较少。
首先说一下js网页打印的几种方法:
1.window.print()
会弹出打印对话框
2.使用使用html 标签引入标签引入Webbrowser控件控件
这种方式是其只兼容IE10以下的浏览器,其他浏览器不可使用
3.document.execCommand(”print”)
类似window.print()
**4.采用采用JQuery插件插件
5.用浏览器打印第三方插件如用浏览器打印第三方插件如lodpod等等**
由于我这边不需要兼容ie10以下,而且个人不喜欢在react项目中引入jquery,同时嫌第三方插件太麻烦,最终选
择window.print(),具体这几种方法区别大家可以去网上查一下,这类博客很多。
废话不多说,直接贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>打印</title>
<link rel="stylesheet" href="./print.css" rel="external nofollow" type="text/css">
<style type="text/css">
@import url("print.css") print;
</style>
<script language="javascript">
function remove_ie_header_and_footer() {
let HKEY_Root, HKEY_Path, HKEY_Key;
HKEY_Root = "HKEY_CURRENT_USER";
HKEY_Path = "\Software\Microsoft\Internet Explorer\PageSetup\";
try {
let RegWsh = new ActiveXObject("WScript.Shell");
HKEY_Key = "header";
RegWsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
HKEY_Key = "footer";
RegWsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
}
catch (e) {}
}
function printPage(printpage)
{
if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
remove_ie_header_and_footer();
}
let newstr = printpage.innerHTML;
let oldstr = document.body.innerHTML;
document.body.innerHTML =newstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
window.onload = function()
{
let bt=document.getElementById("bt");
let page=document.getElementById("printPage");
bt.onclick=function()
{
printPage(page);
}
}
</script>
</head>
<body>
<!--startPrint-->
<div id="printPage" >