JS实现页面打印(整体、局部)


Posted in Javascript onAugust 18, 2017

我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。

方式一:window.print()

整体打印

<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>

现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置

局部打印

首先,在html中,通过star和end来标记打印区域

<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
  这里是需要打印的内容
    .....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>

然后,在点击事件中添加如下代码

function doPrint() {   
    bdhtml=window.document.body.innerHTML;   
    sprnstr="<!--startprint-->";   
    eprnstr="<!--endprint-->";   
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
    window.document.body.innerHTML=prnhtml;  
    window.print();   
}

过滤打印区域的内容

例如

<!--startprint-->
<div class="content">
  <button class="noprint">预览</button>
  <button class="noprint">打印</button>
   这里是需要打印的内容
    .....
  </div>
<!--endprint-->

上面的预览和打印按钮不希望打印,如果要过滤的话可以做下面的样式设置

<style type="text/css">
      @media print {
        .noprint{
          display: none;
        }
      }
    </style>

or

<style type="text/css" media="print">
      .noprint{
        display: none;
      }
    </style>

两种写法任选其一

分页打印

使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
</table>

方式二、jqprint()

jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。

参考网址:https://3water.com/article/102230.htm

请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题

解决方法:加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题

引入

<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>

js

<script language="javascript">
function a(){
    $("#ddd").jqprint();
  }
</script>

html

<div id="ddd">
  <table>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
</div>
<input type="button" onclick=" a()" value="打印"/>

设置模板打印

$("#printContainer").jqprint({
   debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
   importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
   printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
   operaSupport: true//表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true
});

附言

另外还可以使用html 标签<object>引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印)

这里只介绍两种方式,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
Vue.use源码学习小结
Jun 20 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
JavaScript实现旋转轮播图
Aug 18 #Javascript
You might like
PHP 木马攻击防御技巧
2009/06/13 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PDO::setAttribute讲解
2019/01/29 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
python实现定时播放mp3
2015/03/29 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
如何提高JDBC的性能
2013/04/30 面试题
12月小学生校园广播稿
2014/02/04 职场文书
学生会干部自荐信
2014/02/04 职场文书
运动会宣传口号
2014/06/09 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
《正比例》教学反思
2016/02/23 职场文书
创业计划书之美容店
2019/09/16 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
python开发飞机大战游戏
2021/07/15 Python
Python matplotlib绘制雷达图
2022/04/13 Python
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL