js调用浏览器的打印功能（局部打印 不需要调用插件，快捷打印）

最新推荐文章于 2024-03-01 16:15:25 发布
最新推荐文章于 2024-03-01 16:15:25 发布
阅读量5.9k 收藏 4
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_38057462/article/details/79985788
版权 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        var hkey_root, hkey_path, hkey_key;
        hkey_root = "HKEY_CURRENT_USER";
        hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; //网页打印时设置清空页眉页脚     
        function setup_null() {
            try {
                var 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 setup_default() { //网页打印时设置页眉页脚默认值        
            try {
                var RegWsh = new ActiveXObject("WScript.Shell")
                hkey_key = "header"
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&w&b页码，&p/&P")
                hkey_key = "footer"
                RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "&u&b&d")
            } catch (e) {}
        }

        function doPrint(printDiv) {
            try {
                setup_null();
                newwin = window.open("", "newwin", "height=" + window.screen.height + ",width=" + window.screen.width +
                    ",toolbar=no,scrollbars=auto,menubar=no");
                newwin.document.body.innerHTML = document.getElementById(printDiv).innerHTML;
                newwin.window.print();
                newwin.window.close();
                setup_default();
            } catch (e) {}
        }

        function printPage() { //获取当前页的html代码 
            setup_null();
            bdhtml = window.document.body.innerHTML;
            sprnstr = "<!--start-->";
            eprnstr = "<!--end-->";
            printhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
            printhtml = printhtml.substring(0, printhtml.indexOf(eprnstr));
            f = document.getElementById('printf');
            f.contentDocument.write(printhtml); //写入到新的iframe窗口
            f.contentDocument.close();
            f.contentWindow.print(); //在新的iframe窗口调用浏览器打印机
        }
    </script>
</head>

<body>
    <!--start-->
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <h3>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h3>
    <!--end-->
    <input type="button" value="打印" onClick="printPage()" />
    <iframe id="printf" src="" width="0" height="0" frameborder="0"></iframe>
    </div>
</body>

</html>
  1. 由于window.print();在调用打印机的时候会修改页面的dom，导致内容改变，为了让用户在进行预览打印的同时不修改dom内容，最好的解决办法就是用iframe新建一个窗口，将要打印的内容写入到iframe中（f.contentDocument.write(printhtml)）在新打开的iframe中调用浏览器的打印机就解决了此问题（f.contentWindow.print()）；
  2. 多数打印都是表格，默认情况下单元格之间会存在着间距，需要加上border-collapse: collapse属性
  3. 对于打印样式的设置，推荐直接写到标签上，对于其他博客上的加入media="print"引入css，我没有尝试成功，直接写到标签上。
殇蓝
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
不需要插件的WEB打印
07-15
近期研发一个带有物业收费模块的系统，其中需要打印票据，打印催费单，等各种打印。
最新web打印控件 破解版 下载地址
web打印
05-31 2634
最新web打印控件 破解版 下载地址 1、HttpPrinter易桥网络打印机 特点： 1、无插件,主要一句js即可； 2、强大的报表功能,管它什么报表, 二维码,图片等 3、打印机：只要是能用的打印机,都支持,针式打印机、激光打印机、小票打印机,证卡打印机等等 4、支持各种语言,java php js delphi python ios andriod 等. 2、楚琳Web打印控件是以C...
前端实现浏览器打印
m0_60376759的博客
03-01 366
浏览器的print方法直接调用会打印当前页面的所有元素，使用iframe可以实现局部打印所需要的模块。组件printView，将传入的信息放入iframe中，调用浏览器的打印功能。
前端方法 导出excel和调用浏览器打印功能
lianzhang861的博客
11-16 5893
浏览的的打印功能目前只有chrome做的最好，会生成a4纸大小的打印预览，而火狐会将打印预览变成电脑屏幕的100%； 所以最好用chrome来实现 使用场景：我的页面是基于table做的，如下图，需要两个功能 1.导出excel 2.直接点击打印按钮，要求可以调用浏览器的打印功能。 由于页面比较复杂，使用java后台生成表格需要配置的东西过多，比较麻烦，所以我就想到了用html页面直接生成e...
打印功能（JS 调用浏览器）
热门推荐
scdncby的博客
08-29 2万+
1.调用浏览器，完成打印功能（IE，Google都支持【当前时间截点】） 打印当前页面，可以运用css做排版处理，隐藏一些不需要出现的东西   /*打印   */ function printDiv(value) {               window.print(); } html 类属性 class=“Noprn”  隐藏不想打印的内容  @media print 打印cs...
html5获取打印机,【Web前端问题】调用window.print()方法，如何获取打印或者取消的状态？...
weixin_35907331的博客
06-09 4241
项目上需要使用打印功能，使用了pdf.js的插件；点击打印后会调用window.print()方法，随后出现浏览器自带的打印预览页面，并有打印按钮和取消按钮，如何获取到底是点击了打印按钮还是取消按钮？以便于执行打印后的回调函数。打印预览的页面如下图所示，该页面是浏览器自带的，打印和取消按钮触发的方法也无法从外部获取。回答：正好遇到这个问题, 解决放下如下var beforePrint = func...
使用js在前端web页面调用打印机
阿啵呲嘚的博客
09-29 9604
ADD_PRINT_TABLE(top, left, width, height, tableDom) 打印表格，可打印HTML绘制的表格。由于打印机也是比较老旧，所以没有SDK相关的应用，虽然有桌面的插件，但是需要集成到web中来，最终找到了lodop这个万能驱动。ADD_PRINT_TEXT(top, left, width, height, text) // 添加打印文本。固定纸张时该参数是纸张高；
新闻后台管理系统.zip
最新发布
03-21
a、 验证码功能三种实现风格\加减法验证\调用API后台生成 b、 用户管理全部是Ajax局部刷新 c、 新闻管理全部是Ajax局部刷新 4、 用户登录状态验证，采用session 5、 用户登录名获取，采用cookie
JavaScript权威指南(第六版) 清晰-完整
04-25
OReilly精品图书系列：JavaScript权威指南（第6版） 作者简介 　David Flanagan是一名程序员，也是一名作家，它的个人网站是 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby ...
JavaScript权威指南（第6版）
09-20
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
调用浏览器打印按钮,实现打印页面功能
01-16
调用浏览器打印按钮,实现打印页面功能，可以实现二次开发
调用浏览器中的打印功能
08-31
调用浏览器页面打印,js代码实现功能，多种实现方法！
JavaScript权威指南(第6版)(中文版)
09-13
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
javascript网页特效实例大全
01-25
1.6 javascript的函数调用 16 1.6.1 函数的定义与调用 17 1.6.2 全局变量与局部变量 17 1.6.3 可变参数的函数 17 1.6.4 预定义函数 17 1.7 javascript的对象 19 1.7.1 对象的基本概述 19 1.7.2 对象属性 19 ...
如何处理pc端的字体大小的适配问题（完美解决）
殇蓝的博客
04-11 1万+
export const resetPc = () => { var wH = window.innerHeight; // 当前窗口的高度 var wW = window.innerWidth; // 当前窗口的宽度 var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值 if (wW > 1400) { ...
关于请求状态400的问题
殇蓝的博客
03-27 5797
**400 一眼看去的确是前端提交的JSON数据格式存在问题（80%左右的概率都是前端），但是有种是后端的（不管是Java,还是Node，如果没有按照他们的要求传递JSON格式（你不知道的格式情况下20%的概率都是后端的），也会报错），就如下面subs数是base是图片信息的数组，我没上传图片的时候默人的是空，会传递&quot;submitInfomations&quot;:{&quot;subs&quot;:{}},但我没有按照下面这...
node.js作为请求中转，解决前端页面——node.js服务——后台服务（Java、PHP）数据交互问题
殇蓝的博客
03-27 3392
重写对应的get、put、post、delete请求； var express = require('express'); var publicMethod = express.Router(); var http = require('http'); var api = express.Router(); var querystring = require('querystring'); va...
Js点击按钮调用浏览器打印功能隐藏页面打印按钮
05-10
你可以使用`window.print()`方法来调用浏览器的打印功能。要隐藏页面上的打印按钮，你可以使用CSS的`display:none`属性来隐藏该按钮。以下是一个示例代码： HTML: ```html 打印 这是要打印的内容 ``` CSS: ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值