Web打印设置

一，A4纸尺寸

1,A4纸尺寸：210mm*297mm

 

2,A4纸的像素和分辨率

 

根据A4纸尺寸是210毫米×297毫米，而1英寸=2.54厘米，我们可以得出当分辨率是多少像素时，得出A4纸大小尺寸为多少毫米。如下是我们较长用到的规格尺寸：

 

• 当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595；
• 分辨率是96像素/英寸时，A4纸的尺寸的图像的像素是794×1123；(默认)
• 当分辨率是120像素/英寸时，A4纸像素长宽分别是2105×1487；
• 当分辨率是150像素/英寸时，A4纸像素长宽分别是1754×1240；
• 当分辨率是300像素/英寸时，A4纸像素长宽分别是3508×2479；

win7下屏幕DPI分辨率为96像素/英寸。所以A4纸像素尺寸一般为794*1123

 

二，为打印机而不是屏幕设计的样式

 

/*样式将只是应用于打印*/

@media print{

}

 

注* 也可通单独的css文件，设置link的media = "print"属性来指定此样式专用于打印。

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

为你的网站重塑整个css是没有必要的，整体而言，由打印继承默认样式，仅对不同的需要加以限定，为了节省打印时的碳粉，大多数浏览器会自动反转颜色，为了达到最佳效果，应使色彩变化明显：

@media print{

      body{
              color:#000;
    
             background:#fff;
        }

}        

我们不是在创建整个网页的截图,只是为了展现一个设计良好,可读性强的网站:

h1 {
   color: #fff;
   background: url(banner.jpg);
}

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }
}

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

@media print {
   h1 {
      color: #000;
      background: none;
   }

   nav, aside {
      display: none;
   }

   body, article {
      width: 100%;
      margin: 0;
      padding: 0;
   }

   @page {
      margin: 2cm;
   }
}

链接的处理

在打印机上链接是看不到的，应对超链接进行扩展

/*在超链接后面添加带<http://XXX>的完整地址*/
@media print {
   article a {
      font-weight: bolder;
      text-decoration: none;
   }

   article a[href^=http]:after {
      content:" <" attr(href) "> ";
   }
}

 

 

三， 控制打印设置选项

该@page规则允许你指定页面的各个方面。例如，你将要指定页面的尺寸。页边距，页眉、页脚等都是非常重要的。

@page规则--纸张大小设置

通过下面这条CSS您可以设置纸张大小,5.5英寸宽,8.5英寸高.

 

@page{
   size:5.5in 8.5in;
}

 

你还可以通过别名控制纸张大小，如A4或"legal".

@page{
  size:A4;    
}

你还可以控制打印方向，protrait:纵向打印 ，landscape:横向

 

@page {
  size: A4 landscape;
}

 四，控制页面边距

 @page{
         size:A4 landscape;
         margin:10px;
     }

 

 http://www.cnblogs.com/dong0738/archive/2011/10/07/2200539.html

 

转载于:https://www.cnblogs.com/qianxunpu/p/9006552.html