浅谈CSS打印（一）

关于CSS+HTML单据打印，通常用于ERP项目的单据打印，虽然如今浏览器打印不多应用到项目，也有不少打印插件；这就说明CSS打印应用到浏览器不是很完善；特别是Chrome浏览器；不少属性设置不支持；在这方面IE相对于Chrome和FireFox仍是有必定的优点。通常咱们页面显示的页面效果是没法达到咱们打印的效果的，做为前端人员开发咱们考虑到一下几个方面：

• 使用响应式布局设置打印的效果（由于打印纸张不肯定）
• 在合适的时候打印背景图片和颜色（对于不须要的打印的背景可节约墨汁，节约渲染时间，优化系统）
• 添加显示的网址或页面连接，以供参考（可保存为.xps,.pdf等文档格式，打印时，连接地址默认会显示链接title，或文本，不会显示连接的src属性值）
• 使用css filter 提升打印的图形效果

多说无益，直接上代码：

1. 针对打印的样式，而不是屏幕显示样式

首先，针对打印样式咱们须要使用媒体查询（media query）设置。

1. @media print{

//打印样式

}

2.<link href="/Content/homeprint.css" media="print"  rel="stylesheet"  type="text/css"  />也可用外连接CSS文档连接打印样式

2.只针对某些须要重置的元素进行打印设置；

大多数的浏览器会自动根据打印更改颜色，以节省打印原料，可是咱们仍是尽量的手工设置一下。为了达到最佳效果，使颜色清晰明了，咱们至少须要包含一下基本的打印样式。

@media print { body { color: #000; background: #fff; } }

对于打印，大多数状况下咱们不须要打印整个页面，只须要打印一个简洁的可以突出须要信息的页面，那么咱们将不相关的部分隐藏掉（如：导航条、背景图片、文本边框、视频文档等）。

/* Default styles */

 

h1 {

   color: #fff;

   background: url(banner.jpg);

}

 

@media print {

   h1 {

      color: #000;

      background: none;

   }

 

   nav, aside {

      display: none;

   }

}

======================================

在编写打印样式表的时候，你要注意要使用厘米或者英寸做为单位而不是屏幕像素单位，实际的单位对打印很是有用。

为了保证打印样式有用，写CSS样式使打印的内容距离纸张边缘，看起来更好，须要使用 @page 这个语法：

@media print｛

@page {

      margin: 2cm;//页边距

 

   }

｝

为了保证不被跨页打印，如一个标题和内容在页面底部被分开：

div .main｛page-break-after: avoid;｝//元素后不能分页

另外一中状况是要防止图片过宽而超出纸张边缘：

img {

   max-width: 100% !important;

}

 若是你是动态加载二维码或条形码时；遇到第一次不能打印出二维码 或条形码，能够试着让条行码或二位onload后在打印页面内容，避免页面第一次打印不能打印出img；

ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件，只是把DOM加载出来了，没有对图片渲染出来）。
onload 事件的触发，表示页面包含图片等文件在内的全部元素都加载完成（已完成图片src的属性渲染）。

为了保证不被跨页打印，如一个标题和内容在页面底部被分开：

全部的浏览器都支持page-break-after/page-break-before ，主要应用于position 值为 relative 或 static 的非浮动块级元素。

在布局中尽量少地使用分页属性，而且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

可是其属性值具备兼容性问题：

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "left"、"right" 以及 "inherit"。

注释：Firefox、Chrome 以及 Safari 不支持属性值 "avoid"、"left" 以及 "right"。

article {

   page-break-before: always;//在元素前插入分页符

}