js与css实现全局与局部打印、缩放打印、去除页眉页脚打印

最新推荐文章于 2023-05-11 17:35:49 发布
最新推荐文章于 2023-05-11 17:35:49 发布
阅读量5k 收藏 1
点赞数 2
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaofeiyuan/article/details/118583576
版权

目录

js实现全局与局部打印

  • js调用打印函数
    在这里插入图片描述
  • HTML样例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--打印-->
            window.print()

            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            window.print()
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面</button>
</body>
</html>

js实现缩放打印

在这里插入图片描述

  • HTML样例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 0.5

            <!--打印-->
            window.print()

            <!--还原对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1
            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1.5

            window.print()

            document.getElementsByTagName('body')[0].style.zoom = 1
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表-缩放比例为0.5</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面-缩放比例为1.5</button>
</body>
</html>

css实现打印时去除页眉页脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试案例</title>
    <!--media="print" 代表控制打印时的样式：去除打印时的页眉页脚-->
    <style media="print">
        @page {
            size: auto;
            margin: 0mm; /* 影响打印机设置中的边距 */
        }
    </style>
    <script type="text/javascript">
        <!--打印用户表-->
        function printUser(obj) {
            <!--获取网页整体内容-->
            var old_html = document.body.innerHTML

            <!--获取用户表网页内容-->
            var new_ele = obj.parentElement.innerHTML

            <!--将用户表网页内容赋值给网页整体内容-->
            document.body.innerHTML = new_ele

            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 0.5

            <!--打印-->
            window.print()

            <!--还原对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1

            <!--还原网页整体内容-->
            document.body.innerHTML = old_html
        }

        <!--打印当前页面-->
        function printFuc(obj) {
            <!--zoom 设置或检索对象的缩放比例-->
            document.getElementsByTagName('body')[0].style.zoom = 1.5

            window.print()

            document.getElementsByTagName('body')[0].style.zoom = 1
        }
    </script>
</head>
<body>
<ul>
    <li>
        <h3>用户管理</h3><br>
        <table border="2">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr>
                <td>JACK</td>
                <td>20</td>
                <td>武汉</td>
            </tr>
            <tr>
                <td>JOHN</td>
                <td>30</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>MARY</td>
                <td>40</td>
                <td>上海</td>
            </tr>
        </table>
        <br>
        <button onclick="printUser(this)">局部打印用户表-缩放比例0.5</button>
    </li>
    <li>
        <h3>组织管理</h3><br>
        <table border="2">
            <tr>
                <td>一级部</td>
                <td>二级部</td>
                <td>三级部</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>石家庄分行</td>
                <td>新华区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>唐山分行</td>
                <td>路北区支行</td>
            </tr>
            <tr>
                <td>河北银行</td>
                <td>廊坊</td>
                <td>固安县支行</td>
            </tr>
        </table>
        <br>
    </li>
</ul>
<button onclick="printFuc(this)" style="margin: 0 5ex">全局打印当前页面-缩放比例为1.5</button>
</body>
</html>
园中杨
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现页面打印功能实例代码(附去页眉页脚功能代码)
12-09
代码如下: <html> <head></head> <style type=”text/css” media=”screen”> @media print{ .print {display:block;} .notPrint {display:none;} } </style> [removed] function preview() { bdhtml=window.document.body[removed]; sprnstr=”<!–startprint–>”; eprnstr=”<!–endprint–>”; prnhtml=bdhtml.s
打印html时设置去掉页眉页脚 简单一行代码搞定（记录一下）
fighting_sunnyGirl的博客
08-21 5026
media="print"> @page{ size: auto; margin: 0mm; }
通过css布局实现去掉window.print()打印界面的页眉页脚
banweili008的博客
02-26 1896
通过css布局实现去掉window.print()界面的页眉页脚 写在style中 @page{ size: auto; /* auto is the initial value */ margin: 3mm; /* this affects the margin in the printer settings */ }
JavaScript 打印，去掉上下URL，打印背景图
PurineKing之博客
11-24 462
<style type="text/css"> @page{ margin-top: 1mm; margin-bottom: 1mm; } @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; } } </style> <s
web打印内容 可自动适配
m0_61828394的博客
05-11 780
vue打印内容
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
热门推荐
qq_42571665的博客
10-12 2万+
实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。
js打印页面指定区域，并去掉页眉上的时间和请求路径
weixin_30619101的博客
09-27 982
需要通过js打印指定页面的内容 <style media=print type="text/css"> .noprint{visibility:hidden} </style> 然后在不需要打印的div上引用这个样式 <div class="noprint">不需要打印的内容</div> ------------------------...
网页打印插件js 打印出来的页面左下角有访问路径_uniapp的H5页面实现自定义分享（微信分享给朋友）...
weixin_39647734的博客
12-15 354
使用微信提供的JSSDK：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#11、两种下载方式(1)命令行下载：npm install jweixin-module --save(2)访问http://res2.wx.qq.com/open/js/jweixin-1.6.0.js另存为js文...
js 客户端打印html 并且去掉页眉、页脚的实例
10-19
在JavaScript中，有时我们需要实现客户端的HTML打印功能，并且希望去除默认的页眉和页脚，以提供更干净、定制化的打印输出。本文将详细介绍如何通过JS实现在客户端打印HTML内容并移除页眉和页脚。 首先，了解`print...
js或jquery实现页面打印可局部打印
10-26
总结来说，JavaScript（配合jQuery）提供了多种实现局部打印的方法。纯JavaScript方法通过截取和替换页面内容来实现，而jQuery方法则通过创建`iframe`并打印其内容来达到目的。考虑到安全性、兼容性和易用性，推荐...
javascript实现window.print()去除页眉页脚
10-24
总之，要使用JavaScript实现`window.print()`去除页眉和页脚，可以结合使用ActiveXObject（仅限于IE）和CSS媒体查询。在实际应用中，应考虑到不同浏览器的兼容性问题，确保代码能在尽可能多的环境下正常工作。同时，...
JS实现页面打印（整体、局部）
10-19
在网页开发中，有时我们需要为用户提供打印功能，无论是打印整个...不论是整体打印还是局部打印，甚至是分页和自定义打印区域，都有相应的解决方案。通过适当的技术组合，我们可以创建出高效且用户体验良好的打印功能。
javascript之点击按钮实现放大、缩小字体
weixin_34343689的博客
02-25 2381
<style> .bb{color:red;} .cc{color:green;} .chapter{font-size:1.5em;} .normal{font-size:12px;} .hidden{display:none;} </style> <script> $(document).ready(function(){ ...
js字体跟随屏幕大小变化
hch的博客
07-17 1402
<script> /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */ /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */ function placeholderPic(){ var w = document.documentElement.offsetWidth; document.docume.
让文字和标签的大小随着屏幕的尺寸做变化 等比缩放js
涵山韵海的博客
05-06 4329
/*rem*/ var zj_width = 750; //设计稿尺寸 /*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/ var html = document.getElementsByTagName('html')[0]; /*取到屏幕的宽度*/ var width = window.innerWidth; /* 640 100 320 50 */ var fontSize = ...
html中如何在标题中加样式,css如何修改html标签的title样式？（代码示例）
weixin_36040777的博客
06-03 1000
【推荐教程：CSS视频教程 】纯CSS实现tooltip，css更改html标签的title样式【笔者有时间会更新一些边界条件。目前的样式在极端情况是有问题的，请不要直接将代码copy到线上环境，这只是笔者写的一个小demo】html代码：以下代码直接可用，tootip的样式可以自己调试。Document*{margin: 0;padding: 0;}.box {display: flex;jus...
js打印分页 去页脚 页边距
baidu_34405762的博客
08-18 1673
打印多张图片,打印分页
xgboost4j-2.12-1.7.6.jar
最新发布
07-08
xgboost4j-2.12-1.7.6.jar
js打印去除页眉页脚url地址
05-24
在 JavaScript 中，要打印当前页面并去除页眉和页脚的 URL 地址，可以使用 `window.print()` 方法和 `@media print` CSS 媒体查询。 下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Print without Header and Footer URL</title> <style> @media print { @page { margin-top: 0; margin-bottom: 0; } .no-print { display: none; } } </style> </head> <body> <h1>Print without Header and Footer URL</h1> <p>This is a sample paragraph for printing without header and footer URL.</p> <button class="no-print" onclick="window.print()">Print</button> </body> </html> ``` 在上面的示例代码中，我们使用 `@media print` CSS 媒体查询来指定在打印时应用的样式。我们在 `@page` 中设置了页眉和页脚的上边距和下边距为 `0`，这样就可以去除页眉和页脚的 URL 地址。 我们还使用了一个类名为 `no-print` 的 CSS 类来隐藏页面中的打印按钮，因为我们不希望在打印输出中包含这个按钮。 当用户点击页面中的打印按钮时，`onclick` 事件会触发 `window.print()` 方法，这将启动打印对话框，在对话框中用户可以选择打印机和其他打印选项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值