首页 > 其他分享 >JS控制浏览器打印样式,分页及移除页眉页尾

JS控制浏览器打印样式,分页及移除页眉页尾

时间:2022-08-24 16:22:07浏览次数:150  
标签:app gap 页眉 移除 print JS margin page

很简单,引入以下CSS即可:

<style>
/* 分页符 */
.print_gap{page-break-before: always;}
.print_gap .gap_line {height: 1px; background: #e5e5e5; margin: 40pt 0 30pt; }

/* 浏览器打印预览及最终打印的样式 */
@media print{
    /* 去除页眉页脚 */
    @page { margin: 0;}
    body{width:580pt; margin: 0 auto; padding: 0 30px; height: auto;}
    .print_page .print_item{padding-top: 15pt;}

    .app_sidebar, .app_topbar, .fixed_head { display: none; }
    .app_main, .app_main .main, #page{padding: 0;}
    .print_gap .gap_line{margin: 0; visibility: hidden;}
    .noprint { display: none; }
    input.text{border:none;}
    input.text::placeholder{visibility: hidden;}
}
</style>

最主要的css就3处,可以自己试试。

/* 分页符 */
.print_gap{page-break-before: always;}

/* 浏览器打印预览样式hack */
@media print{}


/* 去除页眉页脚 */
@page { margin: 0;}

 

放张预览图,有图有真相:

 

标签:app,gap,页眉,移除,print,JS,margin,page
From: https://www.cnblogs.com/pannysp/p/16620531.html

相关文章

  • mysql php js 经纬度 转换 查询
    坐标系介绍地球坐标(WGS84)WGS-84:是国际标准,GPS坐标(GoogleEarth使用、或者GPS模块)国际标准,从专业GPS设备中取出的数据的坐标系国际地图提供商使用的坐标系火星坐......
  • jsp
    注意要写成out.println,去掉system   ......
  • curl 返回json 并格式化
    应用curlhttp://url/path|python-mjson.tool例子curl'http://localhost:9090/api/v1/targets?state=active'|python-mjson.tool%Total%Received%X......
  • JS doc 接口文档生成器
    前言项目中使用到需要把js方法生成接口文档,使用到了JSdoc这个工具,使用该工具生成文档,需要在方法里加入注释,根据注释说明生成文档,这里顺便记录一下使用过程,模拟了一些j......
  • mysql增删改查json中的某个字段
    创建表1CREATETABLEt_json(idINTPRIMARYKEY,NAMEVARCHAR(20),infoJSON);插入记录1INSERTINTOt_json(id,sname,info)VALUES(1,'test','{"time":"20......
  • Github+jsDelivr+PicGo搭建图床
    1.GitHub创建仓库,申请TokenSetting→DeveloperSettings→PersonalaccessTokens→PersonalaccessTokens→Generatenewtoken创建如图所示,输入名字和勾选r......
  • .NET/Js 状态模式
    概念描述:在该模式中,类的行为基于它的状态改变。这种类型的设计模式属于行为型设计模式。在状态模式中,我们创建表示各种状态的对象和一个随着状态改变而改变的上下文。......
  • 简述JS中forEach()、map()、every()、some()和filter()的用法
    在文章开头,先问大家一个问题:在Javascript中,如何处理数组中的每一项数据?有人可能会说,这还不简单,直接一个for循环遍历一下就好了。是的,确实,这是最常见的做法。但是,除......
  • js轮播图(平移版)
    <divclass="container"><ulclass="list"><!--切换逻辑我们当前的动画逻辑是通过修改list元素的left值平移实现的图片切换在图片1的前边没有图片5的......
  • js 实现 sum 函数无限累加
    //无限累加sum//一共做两件事://1.调用一次返回当前计算函数本身,该函数主要作用之一为合并多次调用传的不同数量的参数//2.给返回的函数增加valueOf最终计算结......