关闭

网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

标签: javascript打印功能
50140人阅读 评论(0) 收藏 举报
分类:

JS实现打印功能(包括打印预览、打印设置等)

最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章。其中绝大部分文章都是使用的Lodop5.0(Web打印和套打控件)控件,而且有些环境下还不能使用。如有想使用此控件实现打印功能的盆友,可点击进行下载。但我强烈推荐下面的方法,即利用系统本身的打印属性实现打印功能。简单的一条系统调用命令即可实现。

前提条件:

进行的电脑必须连接有打印机,至于判断PC是否连接打印机的问题还未能解决,欢迎有解决方法的朋友留言,小生不胜感激!

代码

介绍两个关键的css

<style media="print">

         .Noprint { DISPLAY: none }

         .PageNext{ PAGE-BREAK-AFTER: always }

 </style>

第一个在不需要打印的标签上添加(子标签也将不被打印),第二个在需要换行的标签处添加(该标签所表示的内容将在当前打印的一页内)

基本的做法就是直接调用系统打印功能,如下代码所示:

window.print();

就可实现页面局部打印了,很easy吧!而且可以实现打印预览、设置等操作。

1
1
查看评论

AngularJS2之打印组件essence-ng2-print

简介在项目中,我们经常要使用打印的功能,而AngularJS2又是非常新的框架,许多老的控件可能无法生效,在目前的项目中我们采用了essence-ng2-print,专门为ng2而生.接下来我就简单地说说如何使用这个组件,基础较好的朋友请直接查看Yarn-essence-ng2-print如何安装组...
  • psm948832626
  • psm948832626
  • 2017-07-20 12:55
  • 1521

angular输出html

在用angular作为前端搭建个人博客的时候,发现用angularJs输出
  • yangnianbing110
  • yangnianbing110
  • 2014-11-19 23:14
  • 28626

angularJS1 log打印日志

示例如下:<!doctype html> <html> <head> <meta charset="utf-8"> <title>form demo</title> ...
  • xiejunna
  • xiejunna
  • 2016-12-22 15:26
  • 2044

分享几款免费的web打印控件

 转自:http://bbs.csdn.net/topics/390520672 在WEB系统中,打印的确是个烦人的问题----特别是你的应用环境又有很多种类的打印机。如果自己开发打印控件,可能因为项目时间紧而来不及。前段时间有机会接触了一下WEB打印。在博客园、CSDN以及各个论坛上找了老...
  • zhichao2001
  • zhichao2001
  • 2015-10-29 14:03
  • 10507

js实现局部打印及其打印预览

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">           &#...
  • z69183787
  • z69183787
  • 2014-07-29 14:39
  • 5199

JS实现浏览器打印、打印预览

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦。 1.JS实现打印的方式 方式一:window.print() window.pri...
  • fengshuiyue
  • fengshuiyue
  • 2017-02-26 23:49
  • 11787

JS 实现浏览器打印、打印预览

目前正在做浏览器端采用JS方式实现打印这么一个功能,JS打印实现的方法很多,但是兼容各个浏览器实现打印预览的功能有些棘手,现将实现的内容及遇到的问题记录下来,希望有大牛看到所提的问题后可以给予解答,在此感谢啦。 1.JS实现打印的方式 方式一:window.print() window.print(...
  • qq_19707521
  • qq_19707521
  • 2017-02-28 10:18
  • 917

IE中js调用脚本实现打印预览(按钮本身不打印)

print demo .noprint { display: none; } function doPrintSetup() { //打印设置 printWB.ExecWB(8, 1) } function doPr...
  • qq_30100043
  • qq_30100043
  • 2016-12-08 16:24
  • 2633

JS----打印分布,设置打印,自带的打印预览

//打印分页 page1 page2 //设置打印 <object id="factory" style="display:none" viewastext classid="clsid:1663ed61-2...
  • damys
  • damys
  • 2014-04-18 14:17
  • 1231

IE中js调用脚本实现打印预览(按钮本身不打印)

先上代码(声明大部分代码来自网络) print demo .noprint { display : none; } function doPrintSetup(){ //打印设置 printWB.ExecWB(8,1) } funct...
  • crybird
  • crybird
  • 2012-05-10 07:47
  • 13766
    个人资料
    • 访问:23684203次
    • 积分:58042
    • 等级:
    • 排名:第55名
    • 原创:473篇
    • 转载:41篇
    • 译文:2篇
    • 评论:417条
    流量统计
    你问我答
     有问题?联系我。

    博客专栏
    汪国真--《热爱生命》
          热 爱 生 命
           汪国真

        我不去想是否能够成功

        既然选择了远方

        便只顾风雨兼程

        我不去想能否赢得爱情

        既然钟情于玫瑰

        就勇敢地吐露真诚

        我不去想身后会不会袭来寒风冷雨

        既然目标是地平线

        留给世界的只能是背影

        我不去想未来是平坦还是泥泞

        只要热爱生命

        一切都在意料之中
    最新评论
    轻松一下