html页面实现打印功能

最新推荐文章于 2024-05-31 17:29:33 发布
最新推荐文章于 2024-05-31 17:29:33 发布
阅读量6.4k 收藏 18
点赞数 1
分类专栏： html javaScript 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42518717/article/details/106753750
版权

html页面实现打印功能


之前领导让我写一个html页面，可以进行打印，我上网搜了一下，html页面实现打印功能的博客有很多，这里我就不一一介绍了，直接上干货。

可用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxxx信息系统</title>
    <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css">
    <style>
        /*纯CSS写法*/
        .checkbox-group input{display:none;opacity:0;}
        .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
            line-height: 1;
            position: relative;
            /* display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            cursor: pointer;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center; */
            margin:2px; 
        }
        .checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
            line-height: 20px;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
            content: '';
            color: #fff;
            border: 1px solid #dce4e6;
            background-color: #f3f6f8;
            border-radius: 3px;
        }
        .checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:before{
            /**content:'\2022';圆点*/
            content:'\2713';
            color:#fff;
            background-color: #31b968;
            border-radius: 3px;
            font-size:23px;
            text-align: center;
            border-color: #000000;
        } 
        .noprint { display:none;}
    </style>
</head>
<script>
    function preview(oper) {
        if(oper < 10){
         bdhtml=window.document.body.innerHTML;
        // 打印开始的标志
        sprnstr="<!--startprint-->";
        // 打印结束的标志
         eprnstr="<!--endprint-->";
        // 从打印开始的位置截取到末尾
         prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
         // 从开始截取到打印结束的位置
         prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
         // 替换html
         window.document.body.innerHTML=prnhtml;
        // 打印
         window.print();
         window.document.body.innerHTML = bdhtml;
        }else{
            window.print();
        }
    }
</script>
<body>
    <div>
        <input type="button" onclick="preview(1)" value="打印">
    </div>
    <!--startprint-->
    <div style="page-break-after:always">
    <h1 style="text-align: center;">xxxx申请表</h1>
    <br>
    <!--内容-->
    <table border="1" cellpadding="0" cellspacing="0" width="700px" height="700px" align="center">
        <!--申请人情况-->
        <tr>
            <th width="60px"rowspan="12" align="center">申<br><br>请<br><br>人<br><br>情<br><br>况</th>
            <th colspan="6" rowspan=""align="center">权利人</th>
        </tr>
        <tr class="con">
            <td align="center" style="width: 150px;">权利人姓名（名称）</td>
            <td colspan="5" align="center"></td>      
        </tr>
        <tr>
            <td align="center">证件种类</td>
            <td colspan="5" align="center"></td>
        </tr>
        <tr>
            <td align="center">证件号</td>
            <td colspan="5" align="center"></td>
        </tr>
        <tr>
            <td align="center">通讯地址</td>
            <td colspan="2" align="center"></td>
            <td align="center" style="width: 100px;">邮编</td>
            <td colspan="2" align="center"></td>
        </tr>
        <tr>
            <td align="center">法人代表或负责人</td>
            <td colspan="2" align="center"></td>
            <td align="center">联系电话</td>
            <td colspan="2" align="center"></td>
        </tr>
        <tr>
            <th colspan="6" rowspan=""align="center">义务人</th>
        </tr>
        <tr>
            <td align="center">义务人姓名（名称）</td>
            <td colspan="5" align="center"></td>
        </tr>
        <tr>
            <td align="center">证件种类</td>
            <td colspan="5" align="center"></td>
        </tr>
        <tr>
            <td align="center">证件号</td>
            <td colspan="5" align="center"></td>
        </tr>
        <tr>
            <td align="center">通讯地址</td>
            <td colspan="2" align="center"></td>
            <td align="center">邮编</td>
            <td colspan="2" align="center"></td>
        </tr>
        <tr>
            <td align="center">法人代表或负责人</td>
            <td colspan="2" align="center"></td>
            <td align="center">联系电话</td>
            <td colspan="2" align="center"></td>
        </tr>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="700px" height="100px" align="center" style="border:2px solid #000000;">
        <!-- <div border="1"> -->
            <tr  border="0">
                <td colspan="2" align="center" style="padding-top: 20px;padding-bottom: 10px;"><span>本申请人对填写的上述内容及提交的申请材料的真实性负责。如有不实，申请人愿承担法律责任。</span></td>
            </tr>
            <tr border="0">
                <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">申请人（签章）：</td>
                <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">申请人（签章）：</td>
            </tr>
            <tr border="0">
                <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">（权利人）</td>
                <td colspan="" align="center" style="padding-top: 20px;padding-bottom: 10px;">（义务人）</td>
            </tr>
            <tr border="0">
                <td colspan="" align="center" style="padding-top: 10px;padding-bottom: 10px;">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</td>
                <td colspan="" align="center" style="padding-top: 10px;padding-bottom: 10px;">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</td>
            </tr>
         <!-- </div> -->
    </table>
</div>
</div>
<!--endprint-->
    <br>
    <br>
    <br>
    <br>
    <br>       
</body>
</html>

效果截图

在这里插入图片描述

在这里插入图片描述
上面两张图就是效果图，第一张是在浏览器运行后的截图，第二张图片是保存为pdf的截图。

weixin_42518717
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
向宇
03-21 3191
在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，< div > 内容1 < div > 内容2 < div > 内容3 < div id = " toPrint " style = " color : red " > 打印内容 < button onclick = " print() " > doPrint
网页实现打印功能
hchguu的博客
09-27 1173
在JavaScript中，可以使用Window对象的print()方法来实现打印操作，语法格式“window.print()”。print()方法用于打印当前窗口的内容；调用print()方法会产生一个打印预览弹框，让用户可以设置打印请求。保存当前页面的整个html，因为window.print()打印操作是打印当前页的所有内容，所以先将当前页面保存起来，之后便于恢复。首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式）把当前页面替换为打印内容HTML。
H5项目斑马打印
最新发布
weixin_47519350的博客
05-31 906
本文主要介绍H5项目如何从0开始实现斑马打印机打印功能。主要流程为：斑马官网下载BrowserPrint开发包 => 设备安装BrowserPrint APP => 项目引入BrowserPrint.js => 安装ZebraDesigner => 安装打印设备对应驱动 => 设计打印内容 => 修改输出的ZPL指令调整打印内容。
vue html页面打印功能vue-print-nb
11-19 1677
vue html页面打印功能vue-print-nb vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使...
html页面实现打印
weixin_46410916的博客
07-27 3587
html页面实现打印功能方式一 打印整个html页面方式二 通过获取页面html内容打印 方式一 打印整个html页面 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" > <head> <th:block th:include="include :: header('修改学员基本信息')" /> <style> input[di
html实现打印，word文档模板数据渲染下载上传
stilllearning_的博客
12-10 1618
WEB文件处理相关
JS实现页面打印功能
10-20
其中一个常见的需求就是在网页上实现页面打印功能。本文将深入探讨如何利用JS来实现在浏览器中打印网页内容。 首先，最简单直接的方式是通过`window.print()`方法来触发浏览器的打印功能。这个方法会打开一个打印...
JavaWeb实现打印功能
09-02
在JavaWeb应用中实现打印功能是一项常见的需求，它允许用户从网页上直接打印内容，而无需离开当前页面。本文将详细介绍如何在JavaWeb环境中集成打印功能，并探讨相关的JavaScript代码示例。 首先，JavaWeb本身并不...
html页面实现数据打印效果
11-21
在实现打印功能时，通常会用到CSS样式来控制打印布局，例如隐藏不必要的元素或调整打印页面的边距。在HTML5中，我们可以使用`@media print`查询来定义特定于打印的样式规则。 文件`FileSaver.js`可能用于实现"保存...
实现web网页的打印功能
12-28
在Web开发中，实现网页打印功能是常见的需求，特别是在企业级应用中，用户可能需要将网页内容导出或打印为纸质文档。本篇文章将详细探讨如何在C#和.NET平台上实现这一功能，尤其是如何允许用户选择打印特定的区域。 ...
Vue实现浏览器打印功能的代码
10-15
在Vue.js应用中实现浏览器打印功能，通常会借助第三方库来简化这个过程。在这个示例中，使用了"vue-easy-print"库。这个库提供了一种简单的方式来为Vue组件添加打印功能，允许用户选择性地打印页面内容。 首先，...
html打印预览
12-30
实现html中的打印预览
调用web前端打印功能，对页面进行打印
03-15
web页面调用的打印，包含可实现整页打印，区域打印，选择打印三种方法，直接复制可用（缺点：格式不好控制，建议使用插件打印或PDF打印，详见本人其他分享）
html多选框打印时不显示选中,Javascript小技巧
weixin_42418754的博客
06-03 574
//自定义的apply,callFunction.prototype.apply=function(obj,argu){if(obj)obj.constructor.prototype._caller=this;varargus=newArray();for(vari=0;iargus[i]="argu["+i+"]";varr;eval("r="+(obj...
HTML页面动态内容打印（文字、图片等）
中国程序猿
01-05 1762
HTML页面动态内容打印（文字、图片等），本文使用jsp做讲解，不同框架如vue等前后端分离项目依然可以参考，最重要的是打印页的样式调试问题，有的样式会失效需要特殊处理
JS在html中打印所有类型的数据
HaveNoFear的博客
12-10 1626
// 返回数据类型详情 function type(a){ return Object.prototype.toString.call(a) } // 不格式化返回数据 function scan(a){ var s,t=typeof a if(t !== "object" || a === null){ if(t === "string"){ a=a.split("\\").join("\\\\").split('"').join('\\"').split("\n").jo
写一个html页面，实现打印功能
07-12
好的，我可以帮你写一个基本的 HTML 页面，并添加打印功能。以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>打印功能示例</title> <style> @media print { /* 在打印时隐藏按钮 */ .print-button { display: none; } } </style> </head> <body> <h1>打印功能示例</h1> <!-- 打印按钮 --> <button class="print-button" onclick="window.print()">打印</button> <!-- 需要打印的内容 --> <div id="print-content"> <p>这是需要打印的内容。</p> <p>你可以在这里添加更多内容。</p> </div> <script> // 使用 JavaScript 动态修改需要打印的内容 var printContent = document.getElementById("print-content").innerHTML; // 可以根据需要修改打印样式 // 在按钮点击时执行打印功能 function printFunction() { window.print(); } </script> </body> </html> ``` 这个示例页面中包含一个打印按钮和一个需要打印的内容区域。在点击打印按钮时，会触发 `window.print()` 方法，调用浏览器的打印功能。同时，为了在打印时隐藏按钮，我使用了 CSS 的 `@media print` 媒体查询。 你可以根据自己的需求修改需要打印的内容和页面样式。希望对你有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值