zoukankan      html  css  js  c++  java
  • 网页中JS实现(调用)打印预览功能

    近期的项目中需要在页面中实现打印预览功能——点击网页中的“打印”(Print),弹出打印预览窗口,点击窗口页面中的“开始打印”(Print),则出现浏览器的打印界面。

    看到这样的需求首先想到的是JavaScript,似乎也只有JavaScript。如果说用.Net去做的话那简直是为了杀一只鸡而动用一辆坦克——后果可想而知。

    实现打印网页非常简单,一个window.print();就完成了。

    至于打印预览,经过翻山越岭的翻阅资料——这是一项不可能轻易完成的任务——JavaScript根本就不支持打印预览,Firefox等浏览器也没有提供相应的调用接口或方法。

    至于网上说的 WebBrowser——IE内置的浏览器控件,虽然可以实现打印、打印预览、打印设置等功能,但仅仅是在IE下可行,鉴于这点足以将该方案拒之门外了。

    那么怎么才能满足需求呢——打印预览:即希望在打印前,看看打印出来是个什么样子的。稍微变通一下这个问题就很简单了,只要你知道CSS有针对打印机的样式!接下来该怎么做就不用多说了吧?

    回到最开始的需求描述:

    1. 点击网页中的“打印”(Print),弹出打印预览窗口:
    一个window.open打开打印预览页面,该页面内容与被打印页面内容完全一样,不同的只有一点,增加了用于打印机的样式:
    <link href="/print.css" rel="stylesheet" />
    <link href="/print.css" rel="stylesheet" media="print" />
    需要使用两次,第一次是给浏览器用的,第二次是给打印机用的。

    至于这个打印页面如何获得被打印页面的代码,并加入上述css就是不在本文讨论的技术问题了,用asp、php、.net、js都可以实现。

    2. 点击窗口页面中的“开始打印”(Print),则出现浏览器的打印界面
    预览页面出来了,那就是打印,在打印预览页面中加入 "开始打印"按钮,给它一个window.print();就解决了。

    JS实现网页打印预览的功能解决了——上面的方案是通用的,但打印效果会打折扣——虽然样式可以隐藏部分不需要打印的内容,但始终改变不了结构。所以要有更好的打印效果还得有点针对性的去做,那就是为每个模块建立相应的打印预览页面,将其按照标准文档的格式排版,这样打印效果才更适合阅读——当用户拿着一张A4纸的时候他看到的应该是清晰明了的文档,而不是残缺不全的网页。

  • 相关阅读:
    因为数据库无法大写循环所有要使用shell
    mysql动态扩容调研
    MySQL扩容
    数据库死锁及解决死锁问题
    SQL数据库常见故障及解决方法
    通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
    Ajax方式上传文件
    高并发解决方案--负载均衡
    对TCP/IP协议的深入浅出总结
    常用的php开发工具有哪些?
  • 原文地址:https://www.cnblogs.com/zyxzhsh/p/1853943.html
Copyright © 2011-2022 走看看