首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现快递单打印功能【推荐】

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

- Author -

Nancy-南茜

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
jQuery功能函数详解
Feb 01 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
vue项目实现分页效果
Mar 24 Vue.js
详解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
URL重定向(3) SSL(3) Centos(8) 跨域(4) 二级域名(1) lnmp(1) lamp(1) 443(1) 压力测试(1) 前后端分离(1)
You might like
Php Cookie的一个使用注意点
2008/11/08 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php获取远程文件内容的函数
2015/11/02 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
乌克兰网上珠宝商店：GoldSoveren
2020/03/31 全球购物
诺思信科技（南京）有限公司.NET笔试题答案
2013/07/06 面试题
XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？
2016/01/12 面试题
建筑结构施工专业推荐信
2014/02/21 职场文书
小学教师培训方案
2014/06/09 职场文书
考试作弊检讨书
2014/10/21 职场文书
2015年党小组工作总结
2015/05/26 职场文书
篮球拉拉队口号
2015/12/25 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers