html页面实现打印

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量3.4k 收藏 2
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46410916/article/details/119148339
版权

html页面实现打印功能

方式一 打印整个html页面

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改学员基本信息')" />
    <style>

        input[disabled]{background:#fff;opacity:1;color:black;}
.td1{
    width: 20%;
}
.td3{
    width: 5%;
}
tr{
    height: 56px;
}
        /*input:disabled{
            border : 0px solid #DDD ;
            background-color : white ;

        }*/
    </style>
    <style type="text/css" media="print">
        .noprint { display:none;}
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content container" >

        <div class="row">
            <div col-sm-12>
                <h1 style="text-align: center">报名确认表</h1>
            </div>
        </div>
        <table border="0">
            <tr>
                <td class="td1" style="width:25%"></td>
                <td class="td2">
                    单位名称：<input name="dwcs" value="恒大物业"  style="border:none;" disabled type="text">

                </td>
                <td class="td3" style="width:10%"></td>
                <td class="td4" rowspan="3">
                    <div >
                        <img src="/img/photoDemo/6_zp.jpg">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="td1" style="width:25%"></td>
                <td class="td2">
                    单位所在城市：<input name="dwcs" value="济南"  style="border:none;" disabled type="text">
                </td>
                <td class="td3"></td>
                <td class="td4">
                </td>
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td2">
                    姓名：<input name="dwcs" value="张三"  style="border:none;" disabled type="text">
                </td>
                <td class="td3"></td>
                <td class="td4">
                </td>
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td2">
                    职务：<input name="dwcs" value="项目经理"  style="border:none;" disabled type="text"><br>
                </td>
                <td class="td3"></td>
                <td class="td4">
                    身份证：<input name="dwcs" value="370138273847569283"  style="border:none;" disabled type="text">
                </td>
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td2">
                    手机号：<input name="dwcs" value="1782763234"  style="border:none;" disabled type="text">
                </td>
                <td class="td3"></td>
                <td class="td4">
                    取证类型：<input name="dwcs" value="新取证"  style="border:none;" disabled type="text">
                </td>
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td2">
                    企业联系人姓名：<input name="dwcs" value="王大拿"  style="border:none;" disabled type="text">
                </td>
                <td class="td3"></td>
                <td class="td4">
                    企业联系人手机：<input name="dwcs" value="18393827465"  style="border:none;" disabled type="text">
                </td>
            </tr>
            <tr>
                <td class="td1"></td>
                <td class="td2">
                    企业邮箱：<input name="dwcs" value="test@qq.com"  style="border:none;" disabled type="text">
                </td>
                <td class="td3"></td>
                <td class="td4">
                    企业收件地址：<input name="dwcs" value="山东省济南市历下区伯乐路"  style="border:none;width: 200px" disabled type="text">
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align: center">
                    <!--<button class="noprint btn-dark" onclick="testPrint()" style="text-align: center">打印</button>-->
                    <button type="button" class="btn btn-w-m btn-success noprint" onclick="testPrint()">打印</button>

                </td>
            </tr>
        </table>



</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    function testPrint() {
        window.print();
    }
</script>
</body>
</html>

方式二 通过获取页面html内容打印

window.document.body.innerHTML
网上一搜一大片

么么哒思密达
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面实现数据打印效果
11-21
html页面实现生成数据调用打印机打印，通过后台传送json数据，前端js生成表格化样式，最后连接打印机即可
js打印页面实例
weixin_41696089的博客
12-10 149
跳转方法 function print(contract_id){ var dw=unitid,rq=today; if(isNull(select_unit).length>0){dw=select_unit}; if(isNull(select_date).length>0){rq=select_date}; window.open(basePath+'Security/Risk/showPrint?project_unitid='+dw+'&risk_date='+rq+'
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
向宇
03-21 1528
在开发中，有时需要实现页面的局部打印功能，不打印页面上不需要的区域，< div > 内容1 < div > 内容2 < div > 内容3 < div id = " toPrint " style = " color : red " > 打印内容 < button onclick = " print() " > doPrint
网页实现打印功能
hchguu的博客
09-27 1133
在JavaScript中，可以使用Window对象的print()方法来实现打印操作，语法格式“window.print()”。print()方法用于打印当前窗口的内容；调用print()方法会产生一个打印预览弹框，让用户可以设置打印请求。保存当前页面的整个html，因为window.print()打印操作是打印当前页的所有内容，所以先将当前页面保存起来，之后便于恢复。首先获得元素的html内容（这里建议如果有样式最好是用内联样式的方式）把当前页面替换为打印内容HTML。
html页面打印
u011403672的专栏
01-09 1750
1、页面元素：               2、js：   function doPrint() {    bdhtml=window.document.body.innerHTML;    sprnstr="";   eprnstr="";   prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
HTML 页面打印
u011403672的专栏
01-08 2250
HTML 页面打印     ? //首先要添加代码 ↓↓↓ object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0">object>   //实现打印功能代码 input type="button"
html页面如何打印,javascript如何打印页面？
weixin_34664632的博客
06-03 1905
我们在网页开发过程中经常会有打印页面的需求，通过JS来实现的方法有很多，下面我们看一下JavaScript中通过window.print()方法与jqprint()插件打印页面的方法。方式一：window.print()整体打印打印现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置局部打印首先，在html中，通过star和end来标记打印区域这块...
如何将html页面打印出来,网页太长如何全部打印_怎样打印整个网页内容-win7之家...
热门推荐
weixin_30068877的博客
06-04 1万+
大家都知道我们不仅可以打印文档表格等，还可以对网页进行打印，这样看到有用的网页信息我们就不用复制粘贴到文档中再进行打印了，不过有时候网页太长了，很多用户不知道要如何全部打印，为了帮助到大家，这就教大家怎样打印整个网页内容吧，希望可以帮助到大家。具体步骤如下：1、首先，我们打开想要打印的网页，如图所示。2、把鼠标放在该页面任意位置，单击鼠标右键，在出来的选项中选择打印，如图所示。3、在打印页面右侧的...
th:include的使用
海涛高软
07-05 3947
th:include 和 th:replace 的区别
前端实现打印html页面任意内容
07-26
前端可以打印差前端展示的任意页面的任意内容，只需制定dom节点包裹的内容，即可实现不改变任何样式的前提下安装一定比例缩放A4纸上完成打印。重点是保留原有格式。适合新手，下载可以用，对于vue还是react还是最...
jQuery打印指定区域Html页面并自动分页
10-25
项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下
实现打印页面带有指定的水印内容
05-14
通过前台代码用于打印页面带有指定的水印内容，用于防伪和表明出处。所给代码是简易版的HTML页面，包含2部分，主体内容和附加水印
html 实现准考证打印
04-09
html 实现准考证打印html 实现准考证打印
Web前端开发之HTML_3
zx1026409886的博客
04-23 988
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 887
【代码】用html写一个旋转菜单。
用html画一个四叶草
liulang68的博客
04-20 1583
以上是部分代码，需要请看主页加联系方式。
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1011
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
写一个html页面，实现打印功能
07-12
好的，我可以帮你写一个基本的 HTML 页面，并添加打印功能。以下是一个示例： ```html <!DOCTYPE html> <html> 打印功能示例 @media print { /* 在打印时隐藏按钮 */ .print-button { display: none; } }...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值