1.页面定义打印div按钮：
<!-- 打印机按钮开始 -->
<div style="position: absolute;top:100;right:0px;z-index: 9999;background-color:#EDEDED">
<span id="printBtn" class="fa fa-print hidden-print" title="打印" style="float:left;font-size:24px;cursor:pointer;"></span>
<!-- 打印机按钮结束 -->
2.js中写按钮的监听事件、打印之前设置页面样式的方法
//点击打印，调出答应机的方法
$("#printBtn").click(function(){
onbeforePrint(); //在打印之前执行的方法（目的是修改打印页的样式）
window.print();
//在打印之前执行的方法（目的是修改打印页的样式）
function onbeforePrint(){ //先获取div的高度，当高度小于800px时，需要设置距离顶部的值，大于800则已经铺满整个A4纸，不用设置
var style = document.createElement('style');
var mapHeight = $("#map").height();
var marginTop = "0mm";
if(mapHeight < 800){
var temp = 800 - parseInt(mapHeight);
marginTop = (temp/8).toFixed(2)+"mm";
style.innerHTML = "@page{size: landscape;margin: auto 0mm;margin-top:"+marginTop+"}";
window.document.head.appendChild(style);
3.对设置参数进行解释
@page：打印页的样式名称
size：portrait;（纵向)
size：landscape;（横向)
margin:auto 0mm; （上下设置为自动居中，左右边距为0）
mapHeight ：获取到div的高度，对高度进行判断，是否大于800px，大于则不处理（已经铺满A4纸)，不大于则做差计算距离顶部的高度值（mm毫米）
style = document.createElement('style')：创建一个style样式
style.innerHTML = "@page{size: landscape;margin: auto 0mm;margin-top:"+marginTop+"}"：给样式设置值
window.document.head.appendChild(style)：把样式添加到窗口中
4.效果演示
选择布局和纸张尺寸，打印预览会重新加载：
是一个浏览器内置的方法，用于打开一个新窗口，展示当前页面的内容以便用户打印。这个方法本身不接受任何参数，调用后会弹出一个打印对话框供用户选择打印机和打印选项。通过上述介绍，你已经掌握了如何使用方法以及相关的 CSS 和 JavaScript 技术来实现打印整个 HTML body 的实际高度。在实际项目中，可以根据具体需求灵活运用这些技巧，确保打印出来的页面既美观又实用。欢迎来到我的博客，很高兴能够在这里和您见面！
一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从 code 层面带领大家熟悉「打印」的使用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。到此这篇关于window.print()前端实现网页打印功能的文章就介绍到这了,更多相关window.print()前端网页打印内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/
3.页脚的内容要保存 但是页脚内容左侧会展示当前浏览器的地址链接这时候就要配合JS了，以下代码核心就是不要展示地址 于是新开了个页面将浏览器地址栏赋值为空或者‘·’这样打印的时候就不会出现地址栏地址了，但是于此同事页面的样式没有带过去 所以将原页面的style里的内容和引用的link内容页一并带过去 这样就能保证和原有样式是一样的了。最近做了个需求需要做的是在使用浏览器打印的时候要加上页码 比如当前第几页、打印的总页数。/* 在底部居中显示页码 */自然的显示又不影响页面展示的效果 费了我九牛二虎之力。
window自带一个打印方法 print（）； 默认打印页面中body里的所有内容1，给打印按钮绑定一个onclick=“print()‘’ 方法；在script里写上这个方法function print(){window.print(); //打印方法}2.用println()方法打印局部内容给你要打印的局部内容设置一个div <div id = "jubu"><p>...
语法：window.print()
参数：无。
注：调用print()方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以定制或取消打印请求。
eg:打印当前窗口的内容。
<script type="text/javascript">
function print_Win()...
