开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js打印去除页头

在JavaScript中，如果你想要打印网页内容但去除页头（通常指浏览器默认的打印样式中的页眉和页脚），可以通过CSS的@media print规则来实现。以下是一些基础概念和相关操作：

基础概念

@media print：这是一个CSS媒体查询，用于定义当页面被打印或打印预览模式时的样式。
page-break-before 和 page-break-after：这些CSS属性可以控制分页符的位置。
visibility: hidden：可以隐藏不需要的元素。

相关优势

用户可以自定义打印样式，使得打印输出更加符合需求。
可以去除不必要的页面元素，如页眉、页脚、导航栏等，节省纸张。

类型

内联样式：直接在HTML元素中使用style属性。
内部样式表：在HTML文件的<head>部分使用<style>标签。
外部样式表：通过<link>标签链接到外部CSS文件。

应用场景

打印网页内容时去除页眉和页脚。
打印特定的页面区域，忽略其他部分。

示例代码

以下是一个简单的示例，展示如何通过CSS去除页眉和页脚：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Example</title>
    <style>
        @media print {
            /* 隐藏页眉和页脚 */
            @page {
                margin: 0; /* 设置页面边距为0 */
            }
            body {
                margin: 1cm; /* 设置内容边距 */
            }
            /* 隐藏不需要打印的元素 */
            .no-print {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header class="no-print">This is a header, it will not be printed.</header>
    <div>
        <h1>Main Content</h1>
        <p>This is the main content that will be printed.</p>
    </div>
    <footer class="no-print">This is a footer, it will not be printed.</footer>
    <button onclick="window.print()">Print</button>
</body>
</html>

解释

@media print：定义打印时的样式。
@page { margin: 0; }：设置打印页面的边距为0，去除默认的页眉和页脚。
body { margin: 1cm; }：设置内容区域的边距，确保内容不会紧贴纸张边缘。
.no-print { display: none; }：隐藏带有no-print类的元素，这些元素不会被打印。

注意事项

不同浏览器对打印样式的支持可能有所不同，建议在多个浏览器中进行测试。
如果需要更复杂的打印控制，可以考虑使用JavaScript库如Print.js。

通过上述方法，你可以有效地控制打印输出，去除不需要的页眉和页脚，提升打印效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js去除空格

value=' 前后都是空格 ';"> 访问yaosansi.com 使用的是js

15.9K7 0

企业面试题: 请用JS去除字符中（1）所有空格（2）去除两头空格

参考代码 var str=" shu ke " console.log("所有空格",str.replace(/\s/g,'')) //shuke console.log("两头空格",str.trim

3.3K3 0

JS原生打印

//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @page { size: portrait

22.5K2 0

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...在样式中有规定几个打印的样式 page-break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。...page-break-before 若设定成 always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。...page-break-before 若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。...如果必要则在元素前插入分页符 always 在元素前插入分页符 avoid 避免在元素前插入分页符 left 在元素之前足够的分页符，一直到一张空白的左页为止 right 在元素之前足够的分页符，一直到一张空白的右页为止

14.2K2 1

js调用ie打印

-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> 打印..." οnclick="document.all.WebBrowser.ExecWB(6,1)"> 打印" οnclick="document.all.WebBrowser.ExecWB...="button" value="页面设置" οnclick="document.all.WebBrowser.ExecWB(8,1)"> 打印...OK" οnclick=" return myprint(this);"> 打印预览" οnclick="document.all.WebBrowser.ExecWB

25.6K3 0

js去除字符串空格

使用js去除字符串内所带有空格，有以下三种方法： 1. ...replace正则匹配方法去除字符串内所有的空格：str = str.replace(/\s*/g,””); 去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,””...); 去除字符串内左侧的空格：str = str.replace(/^\s*/,””); 去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,””); 示例： var str...缺陷：只能去除字符串两端的空格，不能去除中间的空格示例： var str = " 6 6 "; var str_1 = str.trim(); console.log(str_1); //6 6//输出左右侧均无空格...单独去除左侧空格则使用 str.trimLeft(); //var str_1 = str.trimLeft(); 单独去除右侧空格则使用 str.trimRight();//var str_1 =

9.9K5 0

js数组去除重复数据

建立一个新数组，然后循环遍历要去重的数组，每次判断新数组不包含旧数组的值时（新数组用indexOf方法检索旧数组的值返回结果等于-1）将该值加入新数组。

5.6K4 0

web页面的单页打印以及批量打印实现方法

打印事件：window.print() 1.单页打印（布局打印）： function printCnt(){ //1.获取当前页的html代码 var body = window.document.body.innerHTML...; //2.要打印的部分（#print里面的内容就是要打印的内容） window.document.body.innerHTML =document.getElementById(...window.document.body.innerHTML = body; //重新载入当前文档: location.reload(); } 注意：location.reload();要加，因可解决JS...window.print()第二次点击事件失效问题 2.批量打印注意点： (1).控制网页的分页：page-break-after:always 注意：避免在表格、浮动元素、带有边框的块元素中使用分页属性...//如果是本地测试，需要先新建Print.html，如果是在域中使用，则不需要 // res 是后端返回的需要打印的xxx.html页面 var pwin=window.open(res,"print

5K0 0

JS后退一页, JS返回上一页, JS返回下一页代码

Javascript 返回上一页: 1.history.go(-1), 返回两个页面: history.go(-2); 2.history.back(). 3.window.history.forward...()返回下一页 4.window.history.go(返回第几页,也可以使用访问过的URL) 例: 向上一页 response.Write...response.Write(“history.go(-1);”) 向上一页JS引用JS): <!...== “undefined”) { document.write(‘js

3.4K3 0

JS后退, JS返回上一页, JS返回下一页

Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward...()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 向上一页...response.Write(“history.go(-1);”) 向上一页JS引用JS): <!...== “undefined”) { document.write(‘js

5K3 0

js调用摄像头

1 2 调用移动端摄像头 3 照相机： 7 8 9 开启摄像头<...400 23 }, 24 audio: true 25 }; 26 //获得video摄像头区域

20.3K7 0

常用技巧之JS去除重复项

这几天一直在更新一些排序啊，去重方面的内容，是因为这些说是技巧，其实都是JS的基本功，不管是新人，还是老鸟，都要加强加强再加强。...那今天我们就一起来学习下JS的去除重复项，说是一起学习，真的就是一起学习，我给你们讲，首先我得自己学会，，先上代码哈： function isCheckArr(arr){ var newArr...怎么样，这个简单吧，就是个for循环，然后indexOf查找而已，，查看以下文章：常用技巧之JS判断数组中某元素出现次数常用技巧之JS判断重复

3K6 0

JS篇(003)-请用 js 去除字符串空格？

答案：replace 正则匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法解析：方法一：replace 正则匹配方法去除字符串内所有的空格：str = str.replace...(/\s\*/g,""); 去除字符串内两头的空格：str = str.replace(/^\s*|\s*\$/g,""); 去除字符串内左侧的空格：str = str.replace(/^\s\*/,...""); 去除字符串内右侧的空格：str = str.replace(/(\s\*\$)/g,""); 示例： var str = " 6 6 "; var str_1 = str.replace(/\...缺陷：只能去除字符串两端的空格，不能去除中间的空格示例： var str = " 6 6 "; var str_1 = str.trim(); console.log(str_1); //6 6//输出左右侧均无空格...方法三：JQ 方法：$.trim(str)方法 $.trim() 函数用于去除字符串两端的空白字符。

6.7K2 0

js 打印机打印指定局部区域

--endprint--> 打印" onclick="doPrint()"> function doPrint() ...--startprint-->"; //开始打印标识字符串有17个字符 eprnstr = ""; //结束打印标识字符串 prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17); //从开始打印标识之后的内容...prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容 window.document.body.innerHTML = prnhtml; //把需要打印的指定内容赋给...body.innerHTML window.print(); //调用浏览器的打印功能打印指定区域 location.reload(); //重新给页面内容赋值； }

6.7K5 0

js去除字符串首字符

slice方法将会创建了一个新的字符串，这就是为什么俺在上面的例子中把它赋给了一个新的变量。

4.1K1 0

Node.js批量去除BOM文件

但有bug，就是在替换文件后原文件的格式变成utf8 BOM了，这种带BOM的XML在Mac下可能读取不出来，所以就需要写个工具处理一下… 其实思路比较简单，首先遍历目录，然后读取目录，将文件头三个字节去除掉

3K2 0

JS去除字符串的空格

JS去除字符串前后空格 //去前后空格 //var LO = data.replace(/(^\s*)|(\s*$)/g, ""); //var LA = data.replace(/(^\s*)|(...\s*$)/g, ""); JS去除字符串所有空格 //直接去除所有的空格 var LL = data.replace(/\s+/g,""); 在Kettle做数据清洗中用到的： //Script here...; //拼接成一个要验证的字符串 //var LL = LO +"," +LA; //去前后空格 //var LL=L1.replace(/(^\s*)|(\s*$)/g, ""); //直接去除所有的空格

8K1 0

JS 调取摄像头

JS 调取摄像头截止目前（2016-06-23）为止，js 调取摄像头实现视频聊天，部分浏览器还是不怎么支持的。示例1 ：代码附上： <!...console.log(err.name + ": " + err.message); }); 就拿以上这个代码来说，火狐下是可以正常调取摄像头的...utf-8" /> js...navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { // Standard 如果用户允许打开摄像头

2.7K3 0

js或jquery实现页面打印可局部打印

1、js实现（可实现局部打印）代码如下: js打印 function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页的...>javascript打印-打印页面设置-打印预览代码打印吗？'))...="jquery-1.6.4.js"> $(function(){ $("input#biuuu_button").click(function(){ $("div#

8K2 0

JS后退一页, JS返回上一页代码,

Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward...()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: 向上一页 response.Write...response.Write(“history.go(-1);”) 向上一页JS引用JS): <!...== “undefined”) { document.write(‘js

2.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭