JS调用浏览器不能全屏适应A4纸解决办法

最新推荐文章于 2025-02-21 16:09:27 发布

原创最新推荐文章于 2025-02-21 16:09:27 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用JS结合JQ解决浏览器打印时页面无法全屏适应A4纸的问题。通过引入jQuery库，提供了一个打印方法，并且针对打印后页面重载导致原有功能失效的问题，提出了监听打印回调并重新刷新页面的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入JQ：<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

打印方法：

// 打印
function preview(){
    bdhtml=window.document.body.innerHTML;//获取当前页的html代码
    sprnstr="<!--startprint-->";//设置打印开始区域
    eprnstr="<!--endprint-->";//设置打印结束区域
    prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
    window.document.body.innerHTML=prnhtml;
    window.print();
    window.document.body.innerHTML=bdhtml;
}

html部分：

<button class="btn-online-printing" onclick="preview()">在线打印</button>

<!--startprint-->  打印开始位置
    <div class="">
        这里是打印的内容
    </div>
    
<!--endprint-->    打印结束位置

提示：这个打印会出现重载页面的现象，页面上原有的功能在重载页面后会失效，

解决办法：监听打印回调然后重新刷新页面

代码如下：

// 浏览器打印回调
var beforePrint = function() {
    location.reload()
				
		        
};
// 浏览器打印回调
var afterPrint = function() {
    location.reload()		    	
		       
};