window.print() 实现A4纸张打印及去掉页眉页脚及打印链接

1、边距为无

 <style>
/* 布局纵向 */
.a4-endwise{width: 1150px;height: 1627px;border: 1px #000 solid;}
/* 布局横向 */
.a4-broadwise{width: 1627px;height: 1149px;border: 1px #000 solid;}</style>

2、边距为默认

<style>
/* 布局纵向 */
.a4-endwise{width: 1075px;height: 1568px;border: 1px #000 solid;
}
/* 布局横向 */
.a4-broadwise{width: 1569px;height: 1075px;border: 1px #000 solid;
}
</style>

完整代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>测评表</title><!-- Bootstrap --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><style>.a4-endwise{width: 1075px;height: 1400px;border: 1px #000 solid;overflow: hidden;padding: 0;word-break:break-all;text-align:center;}.a4-endwise table{border: 1px #000 solid;width: 80%;max-width: 80%;margin: 0px 100px;text-align: center;font-size: 20px;}.print{position: fixed;top: 1%;right: 10%;}</style><body>
<a class="print" href="javascript:;" onclick="preview();">打印</a>
<!--startprint--><div class="container a4-endwise" id="test"></div>
<!--endprint--><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>/*** [打印]* @return {[type]} [description]*/function preview(){bdhtml=window.document.body.innerHTML;//获取当前页的html代码sprnstr="<!--startprint-->";//设置打印开始区域eprnstr="<!--endprint-->";//设置打印结束区域prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取htmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取htmlwindow.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml;}</script></body>
</html>

如果大小不合适，微调一下即可

window.print() 去掉页眉页脚及打印链接

页面中添加样式：

<style media="print">@page {size: auto;  /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */}
</style>

window.print() 实现A4纸张打印及去掉页眉页脚及打印链接相关推荐

window.print() 实现A4纸张打图片分页，解决预览首页空白页、打印多出一张空白页问题
注意   把打印的内容放到这个标签里面 <div class="layui-row" ...
vue 打印功能调用原生print，带（去掉页眉页脚）分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后在页面引入 import Print from 'vue-print-nb' </ ...
jquery.print.js 网页局部打印横向打印去掉页眉页脚
ie-设置(右上角齿轮)-打印-页面设置引入print.css,这个css里存的是自己要打印的区域的样式,比如table,tr,td,边框边距等的样式引入jquery.js和jquery.prin ...
window.print()去掉页眉页脚及网址链接
//打印(兼容IE浏览器) function webPrint(objId){ var printContent=document.getElementById(objId).innerHTML;// ...
window.print()打印时，如何自定义页眉/页脚、页边距
自定义页眉/页脚.页边距,要用到ActiveX控件(在ie的安全设置的启用),会修改注册表中ie的设置,代码如下. try{ var hkey_root,hkey_path,hkey_key; hke ...
vue js 打印去掉页脚的链接，去掉页眉页脚
打印 <div style="padding-top: 15px;width:100px;"><el-button type="primary" ...
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？
[html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚? <style type="text/css" media="print"> @pag ...
【js、vue-print-nb】js 在Chorme中打印页面去掉页眉页脚
js或者vue-print-nb插件在chorme调用打印是都会带上页眉页脚及时间. 在chorme中可以手动设置打印是否要页眉页脚,如果不想手动打印时设置可以参考用css 控制: 参考:http ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...

window.print() 实现A4纸张打印及去掉页眉页脚及打印链接

1、边距为无

2、边距为默认

window.print() 去掉页眉页脚及打印链接

window.print() 实现A4纸张打印及去掉页眉页脚及打印链接相关推荐

最新文章

热门文章