美文网首页JS
js实现打印

js实现打印

作者: 匆匆那年_海 | 来源:发表于2019-04-29 10:42 被阅读0次
<!doctype html>
<html lang='zh-CN'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>打印</title>
    </head>
    <body>
        <button onclick='printPage()'>打印</button>
        <!--要打印的内容-->
        <div id='box'>
            <h1>标题</h1>
            <table>
                <thead>
                    <th>name</th>
                    <th>title</th>
                    <th>level</th>
                </thead>
                <tbody>
                    <tr>
                        <td>海</td>
                        <td>前端工程师</td>
                        <td>罢了</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            function printPage() {
                var printHTML = document.getElementById('box').innerHTML; // 获取要打印的内容
                var page = window.open('', '_blank'); // 打开一个空表窗口,用于打印
                page.document.write(printHTML); // 打印页面的内容
                page.print(); // 打印
                var userAgent = navigator.userAgent;
                if ((userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) || (userAgent.indexOf("Edge") > -1) ||
                    (userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1)) {
                    // IE浏览器
                    page.document.execCommand('print');
                } else {
                    console.log('not IE');
                    page.document.execCommand('print');
                }
            }
        </script>
    </body>
</html>

原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c515
95后前端汉子,爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。

相关文章

  • 原生js实现页面局部打印

    利用原生js实现页面局部打印

  • js实现打印

    原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c51595...

  • JS实现页面打印

    方式一:window.print() 整体打印 现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要...

  • JS实现页面打印

    我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。 方式一:...

  • JS 实现分页打印

    在调用 window.print() 时,可以实现打印效果,但内容太多时要进行分页打印。 在样式中有规定几个打...

  • vue实现打印功能

    打印功能可以自己使用原生js(window.print())实现,其次就是使用插件,介绍一个打印插件 vue-pr...

  • jquery实现打印

    jquery实现打印 jquery.jqprint-0.3.js下载 提取码:vxga html css(必须引入...

  • WKWebView 注入js代码

    在WKWebView中注入js代码,从而实现改变js事件实现方法。比如,在H5页面中有一个打印按钮,iOS 端没有...

  • 用JS在html页面实现打印功能

    用JS在html页面实现打印功能 打印方式一: 打印方式二: 打印方式三(此方式会重新打开一个浏览器窗口): 做项...

  • 纯js实现打印功能

    data数据 js代码 展示效果

网友评论

    本文标题:js实现打印

    本文链接:https://www.haomeiwen.com/subject/sygenqtx.html