zoukankan      html  css  js  c++  java
  • C# 开发网页的打印版

    在项目中,有一个需求时是需要打印产品页面。但是打印出来的版本和网页上的版本不太一致,有些图片不需要,网页上以tab选项卡显示的内容,都需要在打印页面中看到..等等

    CSS针对这种需求,引入了一个@media 规则,@media规则允许你根据不同的media指定不同的css style.  @media print 指的就是print version的css样式

    @media screen   //screen的样式
    {
        p.bodyCss {font-family: arial;}
    }
    
    @media print //print的样式
    {
       p.bodyCss {font-family: serif;}
    
    }
    
    @media screen, print
    {
       p.bodyCss {font-size: 15pt}
    }

    在上面的例子中,对于p的bodyCss样式, 页面上(screen样式)呈现的和打印出来的(print样式)是不一样的字体,但是字体大小是一样的

    你也可以专门为打印print样式,引用一个专门的外部样式

    <link rel="stylesheet" type="text/css" media="print" href="css/printpage.css">

    也可以使用在页面中直接包含css的形式

    <style type="text/css" media="print">
           .noprint {display = none}
    </style>
    
    网页上打印时不需要显示的部分加上 class="noprint"

    有时,需要在打印的页面上,显示网页上折叠隐藏的内容,将内容完整的展示在纸上

    <style type="text/css" media="print">
           .print-show {display = block;}
    </style>

    设置好需要打印内容的css后,我们一般会在页面上增加一个button,button上面的内容为"Print this Page". 当点击这个button时,会打印这个页面。这个是通过javascript来实现的

    <script type="text/javascript">
    
       function printpage()
      {
    
          window.print();
    
       }
    
    
    </script>

    有的时候,一个网页内容非常丰富, 有整个网站共享的layout,包括该网页中的头部,底部。而我们只需要打印这个网页中间的内容,这种时候我们可以通过JavaScript来实现

    假定网页中间的内容,我们用一个div来包裹,这个div的Id为printDiv, 那么写一个JavaScript函数如下

    <script type="text/javascript">
    
    function printversion()
    {
    
       document.body.innerHTML = document.getElementById("printDiv").innerHTML;
       window.print();
       history.go(0);
       
    
    }
    
    </script>
  • 相关阅读:
    函数的重载 C++快速入门06
    PE格式详细讲解8 系统篇08|解密系列
    《零基础入门学习汇编语言》检测点,实验,课后题答案
    PE格式详细讲解9 系统篇09|解密系列
    C++输出输入小结 C++快速入门05
    使用XML生成菜单
    DNS解析过程详解
    Windows Azure 2.5天深度技术训练营 和 微软公有云发现之旅
    使用单例模式实现自己的HttpClient工具类
    android 反编译和防止被反编译。
  • 原文地址:https://www.cnblogs.com/wphl-27/p/9013553.html
Copyright © 2011-2022 走看看