精华内容
下载资源
问答
  • CSS控制print打印样式

    万次阅读 2017-03-18 10:47:40
    一、添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css:  用于打印的css: 2. import方式:    @import url("css/printstylesheet.css") print;   3. 直接把...
    一、添加打印样式
    
    1. 为屏幕显示和打印分别准备一个css文件,如下所示:
      用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
      用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

    2. import方式:
      <style type="text/css">
          @import url("css/printstylesheet.css") print;
      </style>

    3. 直接把屏幕显示样式和打印样式写在一个css文件中:
      @media print {}{
        h1 {
          color: black;
        }
        h2 {}{
          color: gray;
        }
      }
      @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。


    其他:
    创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
    于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.


    为了使打印机更具效率,应只显示主体内容,去除页眉页脚导航栏 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    @media print {
        h1 {
           color: #000;
           background: none;
        }
     
     
        nav, aside {
           display: none;
        }
     
     
        body, article {
           width: 100%;
           margin: 0;
           padding: 0;
        }
     
     
        @page {
           margin: 2cm;
        }
    }


    二、WEB页面实现指定区域打印功能

    使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。

    详细如下:

    <style media=print type="text/css">
    .noprint{visibility:hidden}
    </style>
    要打印的内容。哈哈!
    <p class="noprint">将不打印的代码放在这里。</p>
    <a href="javascrīpt:window.print()" target="_self">打印</a>

    第二种方法:指定打印区域

    把要打印的内容放入一个 span或div,然后通过一个函数打印。

    <span id='div1'>把要打印的内容放这里</span>
    <p>所有内容</p>
    <div id="div2">div2的内容</div>
    <a href="javascrīpt:printme()" target="_self">打印</a>

    <scrīpt language="javascrīpt">
    function printme()
    {
    document.body.innerHTML=document.getElementById('div1').innerHTML+'<br/>'+document.getElementById('div2').innerHTML;
    window.print();
    }
    </scrīpt>

    如果要打印的只是整个页面中的一小部分,就最好采用第二种方法。

    第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。

    点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。


    三、打印样式注意事项:

    1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
      设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
      这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
      background:none;去掉背景
      图片和颜色。

      可以利用background-color属性设置背景颜色为白色,像这样:background-color: white。
      使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
      这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
      你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。
     
    2. 如果需要在打印内容中出现图片,请在HTML代码中加入。

    3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

    4. 隐藏不需要的或是次要的内容。display:none;

    5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。
     不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
     (例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
     这些内容就不会被传送到打印机,下一个页面也不会有它的踪影――它消失了。

    6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

    7. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

    8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
      标签都格式化为黑色文本的单个样式:
      *{ color: ##000# !important }

    9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
      把不在屏幕上显示的文本打印在一个样式元素的末端。
      不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
      (到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
      地说明URL以便访问者可以使用他们的浏览器。

      为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
      目比如圆括号,使它更好看些:
      a:after {content: " (" attr(href) ") ";}

      然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
      文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
      印绝对的URL(即以http://开头的那些),像这样:
      a[href^="http://"]:after {content: " (" attr(href) ") ";}


    10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。
      page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
      属性使图片打印在一张新页面上,并且适合整张页面。
      要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

      创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:
      .break_before { page-break-before: always; }
      .break_after { page-break-after: always; }

      然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。


    四、测试打印样式

    通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这

    打印预览来做测试。


    展开全文
  • PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式

    PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式

    参考文章:

    (1)PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式

    (2)https://www.cnblogs.com/fenglie/p/4701864.html


    备忘一下。


    展开全文
  • @media print颜色样式不起作用

    千次阅读 2020-06-04 10:04:37
    /* 打印样式*/ @media print { #contendmidd tr{ line-height: 13px; } td.tdStyle { color: red !important; } .width100{ font-size: 12px; width: 20%; text-align: center; font-...

    预期效果:

    在这里插入图片描述

    原代码:

    /*  打印样式*/
    @media print { 
    	 #contendmidd tr{
    		line-height: 13px;
    	 }	 
    	td.tdStyle {		
            color: red !important; 
    	}	
    	.width100{
    		font-size: 12px;
    		width: 20%;
    		text-align: center;
    		font-family:cursive;
    	}	
    }
    

    分析:
    @media print中字体大小,行高,宽度属性均起作用,只有颜色设置后无任何变化,查阅文档后发现在浏览器中重写了颜色为黑色,若想改变颜色,需重写浏览器覆盖的颜色代码,修改如下:

    正确代码

    /*  打印样式*/
    @media print { 
    	 #contendmidd tr{
    		line-height: 13px;
    	 }	 
    	td.tdStyle {
    		background: transparent !important;
            color: red !important; // Black prints faster: h5bp.com/s
            box-shadow: none !important;
            text-shadow: none !important;
    	}	
    	.width100{
    		font-size: 12px;
    		width: 20%;
    		text-align: center;
    		font-family:cursive;
    	}		
    }
    

    测试即可正常显示颜色

    展开全文
  • .printonly{ display:none } @media print{ input,.noprint{ display:none } .printonly{ display:block; width:50% } } /** .printonly{ display:none } 不能写到这里,会导致打印时printonly的内容也...
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    <style>
    .printonly{
    	display:none
    }
    @media print{
    	input,.noprint{
    		display:none
    	}
    	.printonly{
    		display:block;
    		width:50%
    	}
    }
    /**
    .printonly{
    	display:none
    }
    不能写到这里,会导致打印时printonly的内容也不显示
    */
    </style>
    
    <body>
    <div class="noprint">
    	这段打印时不显示
    </div>
    <div class="printonly">
        <h1>这段打印时会显示</h1>
        <hr>
        This is print-only
    </div>
    <input onClick="print()" value="点击打印" type="button">
    </body>
    </html>
    

    展开全文
  • 项目中用的是谷歌浏览器,js 执行window.print() 就会调用谷歌浏览...针式打印机由于存在失真问题,所以像有些边框颜色设置的比较浅的就没法打印出来,可以设置边框颜色深一点。 <!doctype html> <html&...
  • window.print控制打印样式

    千次阅读 2019-09-10 20:45:59
    我们可能会去使用 window.print()方法来打印页面,但是当我们遇到需要改变打印时候的字体大小等css样式的时候你可能会懵逼。 所以搜索成了我们的必经之路,我相信在网上搜索出来的最好的答案就是...
  • html css print打印,打印样式
  •  打印的样式设置 可以通过css3 来设置  @("@")media print{  @("@")page { size: A5 landscape; }  } 比如 设置A5 横向打印 转载于:https://my.oschina.net/u/2494395/blog/3019349
  • print.js继承原有样式

    千次阅读 2019-09-11 13:41:23
    npm install --save print-js import Print from ‘print-js’ 调用print.js插件 Print({ printable: 'printJS-form', type: 'html', // 继承原来的所有样式 targetStyles: ['*'] })
  • 把@media print写成单独的scss或css文件,再通过import引入该文件,刷新页面后,样式就不会丢失了
  • CSS print 样式 -- 打印

    2015-06-05 13:09:00
    表明print.css样式表是用于打印的 使用@media规则 可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样: 1 2 3 @media print ...
  • android应用程序如何设置样式,包括样式定义、单个view设置样式、 全局样式设置、样式继承关系。   1、样式定义 android的样式定义在res/values/style.xml文件中,类似web前端中将样式定义在某个css文件...
  • react中使用printJS出现内联样式丢失

    千次阅读 2020-04-27 11:45:06
    react中使用printJS出现内联样式丢失 问题 在react中使用printJS时,假如html标签上写的是内联样式,需要要加上targetStyles这个属性,使得标签的元素继承目标html样式; html <div id="print-box" style={...
  • 业务思路使用css的@page设置 @page { size: portrait; } //纵向 @page { size: landscape; } //横向 业务实现 var cssPagedMedia = (function () { var style = document.createElement('style'); document....
  • window print 设置字体大小

    万次阅读 2009-09-25 10:30:00
    @media print { body { font-size: 12px} } @media screen { body { font-size:40px;} } 设置两套css,分别为打印字体和屏幕显示字体 在打印的时候就会安设置的字体大小来打印了。
  • phpexcel导出设置样式

    千次阅读 2016-12-29 11:19:30
    单独地设置样式参数并不难, 然而更好的法子是将一个格子的样式复制给别的格子: // -----为表格加样式使之更易于阅读 $highestRow = $objPHPExcel->getActiveSheet () -> getHighestRow(); $highestColumn = $...
  • 关于页面打印window.print()的样式问题

    千次阅读 2015-04-24 14:51:00
    当我们打印网页的时候。...打印机会在网页的样式中查找 @media print{}的样式,并适应到要打印的网页中。 所以 如果要打印的页面符合看到的页面效果,最好在写套 样式 <style type="text/css"> /*...
  • 平时留意到许多成熟的web系统会带一个文件名类似于print.css的样式表,不知道其作用,今天抽空研究一下,发表些总结。 原来print.css是专门给打印机设备定义样式的,可以用如下几种方式定义print css:以下为引用的...
  • Python progressbar源码修改(支持设置进度条样式设置)  By qianghaohao(CodeNutter)  默认progressbar进度条是#字符,用起来太单调,如果要设置更加美观的进度条,需要修改下源码,修改了progressbar 目录的__init...
  • 最近项目中使用打印功能,使用vue-print-nb最后打印没有样式,刚开始以为是不支持css预处理(scss、stylus),结果发现不是这个问题,真正原因是: 下边是需要打印的div,在写css样式的时候,这个div不可以让父级给...
  • Awesome Print是一个Ruby库,它以全彩方式漂亮地打印Ruby对象,并以适当的缩进方式暴露其内部结构。 Rails ActiveRecord对象和Rails模板中的用法通过随附的mixin支持。 注意:awesome_print v1.9.0可能不适用于...
  • Python生成excel表格并设置样式

    千次阅读 2020-06-11 18:00:43
    python在做爬虫时会涉及到数据存储问题,下面说一下将数据存储在excel表格中,主要使用扩展类xlwt,下面详细说一下,主要涉及到了数据列,背景,名称等参数。... # 初始化样式 style_head = xlwt.X
  • 2.问题:单选题/radio的样式html页面样式显示正常,但是打印预览时页面样式显示错位 3.解决办法:修改radio显示标签 print.vue(页面标签) <!-- 打印显示会错位 --> <!-- <el-radio-group ...
  • $ gem install amazing_print # Cloning the repository $ git clone git://github.com/amazing-print/amazing_print.git 用法 require "amazing_print" ap object , options = { } 默认选项: indent : 4 , # N
  • 打印某部分效果:需要将css的代码放入要打印的div里面才能生效,才能被jquery加载 引自:http://blog.sina.com.cn/s/blog_85295a390102vmdj.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,737
精华内容 34,694
关键字:

print设置样式