window 对象有一个简单的方法可以直接调起打印机打印整个页面内容

window.print();

但是真正应用的时候肯定需要一个按钮点击打印，这个按钮肯定不需要显示在打印内容中，那如何打印指定部分的内容呢？

这时候我们一定会想到 JS 中的截取内容方法——字符串截取（slice, substr, substring）

Bingo，直接上代码：

<body>
	<!--startpart-->
	<section> 需要打印的内容 </section>
	<!--endpart-->
	<button onclick="printDOM()">打印 页面</button>
</body>

function printDOM(){
	// 获取body的全部内容并保存到一个变量中
	var bodyHtml = window.document.body.innerHTML;
	
	// 通过截取字符串的方法获取所需要打印的内容
	var printStart = '<!--startpart-->';
	var printEnd = '<!--endpart-->';
	
	var printHtmlStart = bodyHtml.slice(bodyHtml.indexOf(printStart));
	var printHtml = printHtmlStart.slice(0,printHtmlStart.indexOf(printEnd));
	
	// 将截取后打印内容 替换掉 body里的内容
	window.document.body.innerHTML = printHtml;
	
	// 打印操作
	window.print();
	
	// 打印完成之后再恢复body的原始内容
	window.document.body.innerHTML = bodyHtml;
}

在这里插入图片描述
点击打印后会出现上图打印配置

  • 布局：可以选择 横向 / 纵向
  • 纸张尺寸：A0-A5 及其他等类型
  • 边距：默认有边距，也可以选择无或者最小值，自定义
  • 选项：可以选中背景图形，页眉页脚我个人觉得没有必要不需要选中

其他配置项可以自行点击打印查看

我的个人博客有空来坐坐

http://www.wangyanan.online

Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

【大模型入门教程】一文带你看懂什么是人工智能体（AI_Agent）？零基础小白收藏这一篇就对了！！

avatar 讯飞AI开发者社区
cover

PHP与人工智能：结合案例与可能性探索

avatar 讯飞AI开发者社区

通用人工智能(AGI)发展现状：从科幻到现实的跨越

通用人工智能(AGI)正从科幻走向现实。2025年，多模态融合、递归推理引擎和能效革命三大技术突破推动AGI发展，国际科技巨头和中国企业加速布局。AI Agent在金融、医疗、教育等领域广泛应用，企业自动化效率显著提升。然而，数据隐私、算法透明度和就业替代等伦理挑战亟待解决。未来，AGI将向多模态量子计算融合、具身智能和世界模型方向发展，需要建立人机协作新模式和完善的政策法规框架。AGI既带来机遇

avatar 讯飞AI开发者社区