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 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
js下载文件并修改文件名
May 08 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
详解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
php数组删除元素示例
2014/03/21 PHP
php数组合并的二种方法
2014/03/21 PHP
Yii分页用法实例详解
2014/12/04 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
php实现评论回复删除功能
2017/05/23 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Vue.js数据绑定之data属性
2017/07/07 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单了解python代码优化小技巧
2019/07/08 Python
Python调用C语言的实现
2019/07/26 Python
python编写微信公众号首图思路详解
2019/12/13 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
2014年单位植树节活动方案
2014/03/23 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
《风娃娃》教学反思
2016/02/18 职场文书