关于CSS+HTML单据打印，一般用于ERP项目的单据打印，虽然现在浏览器打印很少应用到项目，也有很多打印插件；这就说明CSS打印应用到浏览器不是很完善；特别是Chrome浏览器；很多属性设置不支持；在这方面IE相对于Chrome和FireFox还是有一定的优势。一般我们页面显示的页面效果是无法达到我们打印的效果的，作为前端人员开发我们考虑到一下几个方面：
- 使用响应式布局设置打印的效果（因为打印纸张不确定）
- 在合适的时候打印背景图片和颜色（对于不需要的打印的背景可节约墨汁，节约渲染时间，优化系统）
- 添加显示的网址或页面链接，以供参考（可保存为.xps,.pdf等文档格式，打印时，链接地址默认会显示连接title，或文本，不会显示链接的src属性值）
- 使用css filter 提高打印的图形效果
多说无益，直接上代码：
- 针对打印的样式，而不是屏幕显示样式
首先，针对打印样式我们需要使用媒体查询（media query）设置。
- @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;//在元素前插入分页符
}
扫一扫
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
