原生js打印插件Print.js

原创

于 2020-11-30 14:52:56 发布 · 1.4w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #jquery插件 #网页打印

本文介绍了如何在网页系统中实现打印功能，特别是报表打印。推荐了一款原生JS的打印插件Print.js，其代码简洁易懂。通过在HTML页面中引入插件并绑定打印方法，可以实现指定打印区域，同时提供了两种指定不打印区域的方法：添加`no-print`样式类或自定义类名。打印机制是将目标DOM和CSS添加到iframe中，然后打印该iframe。需要注意的是，插件可能不支持`background-color`背景色打印，建议使用`background-image`替代。

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

网页打印功能在很多的网站系统中都会使用到。比如说报表打印功能等。
以下是在Jquery插件库中找到的一款原生js打印插件，代码清洁简单，封装的代码也很好理解。

index.html页面代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Print.js 演示</title>
<style>
	html,body{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 14px;
		color: #333;
	}
	.fr{
		float:right;
	}
	.vt{
		vertical-align: top;
	}
	
  .wrap{
    margin: 0 auto;
    padding: 20px;
    width: 640px;
    border:1px solid #ccc;
  }
  .form .row{
    padding: 10px 0 0;
  }
  .btn{
     display: block;
     margin: 20px auto;
     padding: 8px 16px;
  }
</style>
</head>
<body>

<div id="wrap" class="wrap">
  <div class="con">
      <h1>萨摩耶犬</h1>
      <ul>
        <li>
          <h3>发展历史</h3>
          <img class="fr" src="files/dog.jpg" width="200">
          萨摩耶犬是因西伯利亚牧民族萨莫耶德人而得名，原产位于俄罗斯北极地区，起源于17世纪。原始的萨摩耶犬是由如今定居在乌拉尔山以东的极地地区的萨莫耶德游牧部落所培育的。在19世纪末，有毛皮商人将此犬输入