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模拟地球旋转效果代码实例
Dec 02 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
微信小程序实现签字功能
Dec 23 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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
详解PHP归并排序的实现
2016/10/18 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
params有什么用
2016/03/01 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
护士实习自我鉴定
2013/10/22 职场文书
医学生自荐信范文
2013/12/03 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
创业计划书之餐饮
2019/09/02 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android