关于前端页面打印功能

最新推荐文章于 2024-06-10 16:43:59 发布

冯小东

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量4.3k

点赞数

分类专栏： JavaScript 文章标签：前端页面打印打印 print

本文链接：https://blog.csdn.net/baidu_25343343/article/details/61191467

版权

JavaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

项目开发中，都有一个这样的需求：

当页面设计好后需要打印出来，如网页的的打印浏览和打印功能，有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档

如何实现？？直接上例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

    <script type="text/javascript">
        function preview(oper){
            if (oper < 10){
                bdhtml=window.document.body.innerHTML;	//获取当前页的html代码
                sprnstr="<!--startprint"+oper+"-->";	//设置打印开始区域
                eprnstr="<!--endprint"+oper+"-->";	//设置打印结束区域
                prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
                prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
                window.document.body.innerHTML=prnhtml;
                window.print();
                window.document.body.innerHTML=bdhtml;
            } else {
                window.print();
            }
        }
        function xx(){
            window.print();
        }
    </script>

</head>

<body>

<span> 预览功能可以使用谷歌浏览器，ie预览功能同上，其他好像不支持</span>

<span style="color: red">直接粘贴到页面(html)中就可以使用</span>

<!--startprint1-->

<!--打印内容开始-->

<div id=sty>

    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dignissimos et ex nam odio omnis, optio provident, quos reiciendis sint vel voluptatum. Assumenda exercitationem necessitatibus perferendis quam veniam voluptates!</span>

</div>

<!--打印内容结束-->

<!--endprint1-->

<input type=button name='button_export' title='打印1' οnclick=preview(1) value=打印图片>

<input type="button" value="打印整个网页" οnclick="xx()">


</body>

</html>

效果如下：

区域内指的是：你希望网页打印的范围哪里到哪里，比如一个网页你只想打印Body部分，不想打印header，那就可以把body放在区域内即可。

方法：

<!--startprint1-->

<!--打印内容开始-->

<div id=sty>

    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dignissimos et ex nam odio omnis, optio provident, quos reiciendis sint vel voluptatum. Assumenda exercitationem necessitatibus perferendis quam veniam voluptates!</span>

</div>

<!--打印内容结束-->

<!--endprint1-->

把需要打印的东西放置和<！--endprint1-->中。

冯小东

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
关于前端页面打印功能

项目开发中，都有一个这样的需求：当页面设计好后需要打印出来，如网页的的打印浏览和打印功能，有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档如何实现？？直接上例子 Insert title here function preview(oper){ if (oper <
复制链接

扫一扫