js实现浏览器打印功能的示例代码


Posted in Javascript onJuly 15, 2020

最近接触到一个新需求,实现打印机打印小票的功能。打的一桌子小票(惭愧),不过也基本满足了业务上的需求,现在分享一下如何实现(好记性不如烂笔头)

先上代码

// 布局代码
<div id="print">
    <div id="print_content"></div>
</div>
//js 部分代码var f = document.getElementById('printf');
   if (f) {
    document.getElementById("print_content").removeChild(f);
   }
   var printhtml = `
   <div style="font-size:12px;margin-left: -6px;">
    <p style="margin-left:40px;">${this.ticket.title}</p>
    <p>--------------------------------------</p>
    <p>提货点:${this.ticket.pickUpAddress}</p>
    <p>商品名称:${this.ticket.commodityName}</p>
    <p>下单时间:${this.ticket.paymentTime}</p>
    <p>提货人:${this.ticket.receiver}</p>
    <p>联系电话:${this.ticket.receiverPhone}</p>
    <p>提货码:${this.ticket.pickUpCode}</p>
    <p>提货时间:${this.ticket.submissionTime}</p>
    <p style="color:#FFFFFF">.</p>
   </div>`
   if (!!window.ActiveXObject || "ActiveXObject" in window) { // 针对IE进行适配
    var HKEY_Root, HKEY_Path, HKEY_Key;
    HKEY_Root = "HKEY_CURRENT_USER";
    HKEY_Path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    //设置网页打印的页眉页脚为空
    function PageSetup_Null() {
     var Wsh = new ActiveXObject("WScript.Shell");
     HKEY_Key = "header";
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
     HKEY_Key = "footer";
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");
     HKEY_Key = "margin_left"
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); //键值设定--左边边界
   
     HKEY_Key = "margin_top"
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); //键值设定--上边边界
   
     HKEY_Key = "margin_right"
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); //键值设定--右边边界
   
     HKEY_Key = "margin_bottom"
     Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "0"); //键值设定--下边边界
    }
    printhtml = `
    <div style="font-size:12px;font-weight: 800;height:150px;width:300px">
     <p style="margin-left:35px">${this.ticket.title}</p>
     <p>------------------------------------------------</p>
     <p>提货点:${this.ticket.pickUpAddress}</p>
     <p>商品名称:${this.ticket.commodityName}</p>
     <p>下单时间:${this.ticket.paymentTime}</p>
     <p>提货人:${this.ticket.receiver}</p>
     <p>联系电话:${this.ticket.receiverPhone}</p>
     <p>提货码:${this.ticket.pickUpCode}</p>
     <p>提货时间:${this.ticket.submissionTime}</p>
     <p style="color:#FFFFFF;font-weight: 100;">.</p>
    </div>`
   }
   var iframe = document.createElement('iframe');
   iframe.id = 'printf';
   iframe.style.width = '0';
   iframe.style.height = '0';
   iframe.style.border = "none";
   document.getElementById("print_content").appendChild(iframe);
   setTimeout(() => {
    iframe.contentDocument.write(printhtml);
    iframe.contentDocument.close();
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
   }, 100)

因为要求不能把打印的数据显示在页面上,所以通过iframe的方式去实现。单纯的截取字符串重新赋值body内容能进行打印却把打印的内容展现在页面中了,所以不行。

打印针对IE的浏览器进行了一定程度的调整,IE打印要做特定的处理,详见上面判断代码。打印内容通过模板字符串加内联样式去实现。满足了基本需求。

是否应该也通过截取页面字符串的方式去做可能比较浪费性能些,为什么这么说?因为样式在打印的小票上有一定程度的偏差,修了东墙破了西墙,只能采取相对的方式取舍。如果这种写法不满足,可以采取截取字符串写class尝试。

以上就是js实现浏览器打印功能的示例代码的详细内容,更多关于js 浏览器打印的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
详解JavaScript 作用域
Jul 14 #Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 #Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
javaScript实现一个队列的方法
Jul 14 #Javascript
0基础学习前端开发的一些建议
Jul 14 #Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
浅析Python四种数据类型
2018/09/26 Python
python实现简单成绩录入系统
2019/09/19 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
创意活动策划书
2014/01/15 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
材料会计岗位职责
2014/03/06 职场文书
四群教育工作实施方案
2014/03/26 职场文书
担保书范本
2015/01/20 职场文书
企业介绍信范文
2015/01/30 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
邹越演讲观后感
2015/06/15 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript