window.print()前端实现打印功能

方法介绍

window.print()方法用于打印当前窗口的内容。
默认打印页面中body里的所有内容。
调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印配置。

1. 打印方法

1.1 打印当前窗口内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<script>function doPrint() {window.print()}
</script>
<body>
<button onclick="doPrint()">打印</button>
<div style="width: 300px; height: 100px; border: 1px solid black">打印内容区域
</div>
</body>
</html>

1.2 打印指定区域内容

1.2.1 方式1：截取当前页面需要打印的内容

示例demo如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<script>function printpage() {let oldStr = window.document.body.innerHTML; // 获取body的内容let start = "<!--startprint-->"; // 开始打印标识, 17个字符let end = "<!--endprint-->"; // 结束打印标识let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给bodywindow.print(); // 调用浏览器的打印功能打印指定区域window.document.body.innerHTML = oldStr; // body替换为原来的内容}
</script>
<body><input type="button" value="打印此页面" onclick="printpage()"/><!--startprint--><div id="printContent">打印内容</div><!--endprint-->
</body>
</html>

注：该种方式会修改当前窗口的显示内容，比如上述示例代码中的打印按钮，显示打印预览窗口时，浏览器页面上打印按钮会消失。

1.2.2 方式2：打印页面指定的元素区域内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window.print()打印测试</title>
</head>
<script>function printpage() {let newstr = document.getElementById("printContent").innerHTML;let oldstr = document.body.innerHTML;document.body.innerHTML = newstr;window.print();document.body.innerHTML = oldstr;}</script>
<body><input type="button" value="打印此页面" onclick="printpage()" /><div id="printContent" style="width: 300px; height: 100px; border: 1px solid black">打印内容区域</div>
</body>
</html>

注：该种方式，也会修改当前窗口的内容。

上述两种打印方法会将页面的元素内容改变，在项目中，有时不允许修改当前窗口的内容，可以使用window.open()方法打开一个新的浏览器窗口。

2. 打印样式

<style type="text/css" media="print">// 打印样式
</style>

3. 去除浏览器默认页眉页脚

<style type="text/css" media="print">@media print {@page {margin: 0;}body {margin: 1cm; // 此处样式根据实际需要进行设置}}
</style>

参考文档：

window.print() 前端实现网页打印详解
Window 对象 | 菜鸟教程

window.print()前端实现打印功能相关推荐

window.print() 前端页面打印与预览PDF
window.print()打印是浏览器自带的打印,实现原理是将html转换为pdf可以在线预览打印或者导出pdf,在任何网页上可通过Ctil+p快捷键调出浏览器打印程序,它可将整个网页打印出来,在我 ...
window.print()方法实现打印功能，多出一张空白页
项目内需要实现一个打印的功能,用了window.print()方法,但是在打印的时候总是多出一张空白页,偶然搜到了一篇文章,(https://blog.csdn.net/web_houzhanguo/ ...
window.print()实现局部打印及遇到的问题
window.print()实现局部打印及遇到的问题公司的一个后台管理系统需要实现打印一个签收单,我选择用window.print()实现打印,但是遇到了一些问题:需求实现的效果: 打印时需要隐藏顶 ...
使用window.print()方法分页打印
使用window.print()方法分页打印只需要在每页中增加以下样式属性 style="page-break-after:always" 例如 <div style=&q ...
window.print() 前端实现网页打印详解
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打印当前窗口的内容.调用 prin ...
window.print()实现分页打印
第一种方法:字符串拼接的方式表头在style中填写样式 var printStr = "<html><head><meta http-equiv='Conte ...
window.print()进入到打印预览界面后无法进行布局和纸张选择等设置的原因及解决方法
做一个网页打印的功能,打印出网页某一部分的内容,使用的window.print()区打印,打印的过程中发现打印预览时没办法进行布局和纸张等的设置.如下图,图一为正常情况可设置相关配置,图二为我遇到的情 ...
使用 Window print() 方法实现打印文件
前言:今天得到一个需求就是把一些wode文档中的表格,去根据数据填充,然后调用打印机进行打印出来在这个需求下来的时候,其实第一时间就想的是,使用JAVA代码对wode文档进行操作,然后调用打印机去 ...
window.print()；html 打印之 print.js
插件地址:Print.js - Javascript library for HTML elements, PDF and image files printing. 最近顾客需要把html打印,用w ...