【JS】调用浏览器打印功能

参考文献：https://blog.csdn.net/qq_32540639/article/details/74909891

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>局部打印案例</title> 
<script type="text/javascript">    
    function doPrint() {     
        //取得浏览器的userAgent字符串
        bvar userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf("trident") > -1 || userAgent.indexOf('msie') > -1) {
            alert("请使用google或者360浏览器打印");
            return false;
        }
 
        // 打印
        bdhtml = window.document.body.innerHTML;//获取当前页的html代码
        sprnstr = "<!--startprint-->";//设置打印开始区域
        eprnstr = "<!--endprint-->";//设置打印结束区域
        prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17); //从开始代码向后取html
        prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
        window.document.body.innerHTML = prnhtml;
        window.print();
        window.document.body.innerHTML = bdhtml;
}     
</script> 
</head> 
 
<body> 
<p>1不需要打印的地方</p> 
<p>2这里不要打印啊</p> 
<!--startprint--><!--注意要加上html里star和end的这两个标记--> 
<div class="m-page" <strong>contenteditable="true"</strong>>
<h1>打印标题</h1> 
<p>打印内容</p> 
</div>
<!--endprint--> 
<button type="button" onclick="doPrint()">打印</button> 
<p>不打印的地方啊哈哈哈哈</p> 
<p>2</p> 
</body> 
</html>

　　

【注意】contenteditable属性，将页面需要打印部分的功能可以点击编辑，再打印　　

 

posted @   蓝色星辰1993  阅读(2223)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示