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 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
简单实现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/10/20 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
java直接调用python脚本的例子
2014/02/16 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python 实现识别图片上的数字
2019/07/30 Python
python numpy数组复制使用实例解析
2020/01/10 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
应届生服装设计自我评价
2013/09/20 职场文书
电气专业推荐信范文
2013/11/18 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
利用python进行数据加载
2021/06/20 Python
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技