JS实现快递单打印功能【推荐】


Posted in Javascript onJune 21, 2018

最近做项目需要打印快递单,在网上搜索了一下发现直接给出代码的比较少。

 首先说一下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" >
  <div id="emsType" class="left">
    <span class="deviation">标准快递</span>
  </div>
  <div id="barcode" class="right">
    <span class="deviation">二维码</span>
  </div>
  <div id="sender" class="left">
    <span class="deviation">寄件:</span>
    <span>xxxx</span>
  </div>
  <div id="area" class="right">
    <span class="deviation">xxx区</span>
  </div>
  <div id="recipient" class="left">
    <span class="deviation">收件:</span>
    <span class="deviation">xxxx人xxxx手机xxxxxxx</span>
    <span class="deviation">xxxxxxxx小区</span>
  </div>
  <div id="pay" class="left">
    <span class="deviation">付款方式:</span>
    <span></span>
    <br/>
    <span class="deviation">计费重量(KG):</span>
    <span></span>
    <br/>
    <span class="deviation">保价金额(元):</span>
    <span></span>
    <br/>
  </div>
  <div id="delivers" class="right">
    <span class="deviation">收件人\代收人:</span>
    <span></span>
    <br/>
    <span class="deviation">签收时间:</span>
    <span></span>
    <span>年</span>
    <span></span>
    <span>月</span>
    <span></span>
    <span>日</span>
    <span></span>
    <span>时</span>
    <br/>
    <span id="note">快件送达收货人地址,经收件人或收件人允许的代收人签字,视为送达</span>
  </div>
  <div id="order" class="left">
    <span class="deviation">订单号:</span>
    <span></span>
    <span class="deviation">件数:</span>
    <span></span>
    <span class="deviation">重量(KG):</span>
    <span></span>
    <span></span>
  </div>
  <div id="divide" class="left">
  </div>
  <div id="number" class="left right">
    <span class="deviation">条码</span>
  </div>
  <div id="send" class="left right">
    <span class="deviation">寄件:</span>
    <span></span>
  </div>
  <div id="pickup" class="right">
    <span class="deviation">收件:</span>
    <span></span>
  </div>
  <div id="remark" class="left">
    <span class="deviation">备注:</span>
    <span></span>
  </div>
  <div id="net" class="left">
    <span class="deviation">www.ems.cn      客服电话:11183</span>
  </div>
  <div id="QRCode" class="right">
    <span class="deviation">二维码</span>
  </div>
</div>
<!--endPrint-->
<input name="print" class=" no-print" type="button" id="bt" value="点击打印" />
</body>
</html>

通过css3 print控制打印样式,不需要打印的可以通过添加 class为noPrint来隐藏

@media print{
  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5 arial,"黑体", \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }
  .no-print{
    display:none;
  }
  @page{
    size: 100mm 150mm;
    margin: 1.75mm;
  }
  #printPage {
    width: 96mm;
    height: 146mm;
    position: relative;
    border: 1px dotted #000000;
    box-sizing: border-box;
  }
  #printPage span{
    margin-left: 2mm;
  }
  .left {
    border-left: 1px dotted #000000;
    border-right: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
    left: 0;
  }
  .right {
    border-right: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
    /*right: 0;*/
  }
  .deviation{
    margin-left: 2mm;
  }
  #emsType{
    width: 40mm;
    height: 14mm;
    position: absolute;
    top: 0;
    padding-top: 6mm;
    font-size: 20px;
    border-top: 1px dotted #000000;
  }
  #barcode{
    width: 56mm;
    height: 20mm;
    position: absolute;
    top: 0;
    left: 40mm;
    border-top: 1px dotted #000000;
  }
  #sender{
    width: 46mm;
    height: 15mm;
    font-size: 12px;
    position: absolute;
    top: 20mm;
  }
  #area{
    width: 50mm;
    height: 15mm;
    position: absolute;
    top: 20mm;
    left: 46mm;
  }
  #recipient{
    width: 96mm;
    height: 17mm;
    position: absolute;
    left: 0;
    top: 35mm;
    font-size: 12px;
  }
  #pay{
    width: 40mm;
    height: 14mm;
    position: absolute;
    top: 52mm;
    font-size: 12px;
  }
  #delivers{
    width: 56mm;
    height: 14mm;
    position: absolute;
    top: 52mm;
    left: 40mm;
    font-size: 12px;
  }
  #order{
    width: 96mm;
    height: 20mm;
    position: absolute;
    left: 0;
    top: 66mm;
    font-size: 12px;
  }
  #divide{
    width: 96mm;
    height: 4mm;
    position: absolute;
    left: 0;
    top: 86mm;
  }
  #number{
    width: 96mm;
    height: 15mm;
    position: absolute;
    left: 0;
    top: 90mm;
    font-size: 12px;
  }
  #send{
    width: 40mm;
    height: 17mm;
    position: absolute;
    top: 105mm;
    font-size: 12px;
  }
  #pickup{
    width: 56mm;
    height: 17mm;
    position: absolute;
    top: 105mm;
    left: 40mm;
    font-size: 12px;
  }
  #remark{
    width: 68mm;
    height: 17mm;
    position: absolute;
    top: 122mm;
    font-size: 12px;
  }
  #net{
    width: 68mm;
    height: 7mm;
    position: absolute;
    top: 139mm;
    font-size: 12px;
  }
  #QRCode{
    width: 28mm;
    height: 24mm;
    position: absolute;
    top: 122mm;
    left: 68mm;
  }
  #note{
    font-size: 6px;
  }
}

一开始在ff和chrome打印出来的会有细微差别,这是由于浏览器自带样式的影响,清除浏览器样式后基本没区别了还有就是chrome需要将浏览器设置里自定义字体中最小字体调到最低,不然会影响打印效果 ff这需要在打印里设置页头页脚为空白,不然打印的带页头页脚。 

 此外chrome打印出来的比ff清楚,这点原因我还没搞清楚。 

 贴两张打印预览,上面是chrome,下面是ff

JS实现快递单打印功能【推荐】
JS实现快递单打印功能【推荐】

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
js消除图片小游戏代码
Dec 11 Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
You might like
PHP session有效期问题
2009/04/26 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
javascript的push使用指南
2014/12/05 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
python 读取文件并替换字段的实例
2018/07/12 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
毕业生求职推荐信
2013/11/04 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
浅析NIO系列之TCP
2021/06/15 Java/Android
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android