web打印在一些开发中是比较常见的需求,最简单的办法是使用css print进行控制;对于一些建议可以参考http://slodive.com/web-development/css-print-page-tricks/;但是有时候我们需要设置背景或者其他类似的功能;如果不引入浏览器插件,我尝试了一下方法进行解决。

1、如图:

我想打印图中的投票结果条,该条之前是使用纯css实现,但是在IE上无法打印;目前是使用css背景+图片实现;

<div class="myprogress" title="${percent}%">
<img class="mybar" src="${ctx}/static/images/bar.png" style="width: ${percent}%!important;"/>
</div>
    .myprogress {
background: #f5f5f5!important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
}
.mybar {
width: 100%!important;
margin-top: -5px;
height: 18px;
}
@media print {
body {-webkit-print-color-adjust: exact;}
.no-print {display: none;}
}

其中: body {-webkit-print-color-adjust: exact;} + background: #f5f5f5!important; 对chrome有效;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);对IE有效(测试使用IE8,其他版本未测试);但是对firefox还是无效。

2、使用position:absolute的图片解决;这种方式麻烦,但是对IE、Firefox、Chrome浏览器都起作用;如图:

<div class="container">
<img class="myimg" src="common/images/enterprise/image2.jpg"/>
<div class="mydiv">11111111111111111111111</div>
</div>
<div style="margin-top: 400px;">
<input type='button' class="no-print btn" value='打印' onclick='javascript:window.print()'/> 
</div>
    <style media="all">
.myimg {
position: absolute;
top:0;
left: 0;
width: 500px;
}
.mydiv {
position: absolute;
top: 0;
left: 0;
color: blue;
background: red!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='red',EndColorStr='red');
} @media print {
body {-webkit-print-color-adjust: exact;}
}
</style>

通过对图片进行绝对定位可以搞定。(对于Firefox div的背景在打印时会显示为白色)也需要改造成图片形式。

总起来说,以上都比较麻烦,但是如果您的页面不是很复杂,又不想引入打印插件,可以尝试这种方法解决一下。有朋友还有更好的方案吗?

web打印难题—背景不打印的简单不完美解决方案的更多相关文章

  1. JS达到Web指定保存的和打印功能的内容

    背景 首先,说说文章的背景.近期手中的一个项目,因为需求中要求提供Web界面的打印功能.当然假设没有打印机,还能够提供保存到本地.项目组长把这个"小任务"分给了我.本着努力为组长分 ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息

    在最新的MVC4+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单.运单合并.到货扫描.扣仓.出仓.查询等各个模块的操作,里面涉及到一些运单套打的操作,不过由于 ...

  3. web页面实现指定区域打印功能

    web页面实现指定区域打印功能 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 详细如下: <style media=print type="t ...

  4. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

  5. CAD打印图纸要怎么操作?简单方法分享给你

    大家日常生活中多多少少的都接触到过CAD文件,CAD图是借助CAD制图软件来进行绘制完成的.唯一的困惑就是CAD图纸的格式大多数均为dwg格式的,查看起来不是那么的方便?所以很多设计师们都会选择将图纸 ...

  6. C#实现无物理边距真正可打印区域的绘图\打印程序开发

    经常在开发实际的应用程序中,需要用到图形绘制和打印程序.如何实现完整的精确打印和绘图是需要注意许多细节地方的.最近在遇到打印问题的时候,仔细研究一阵,总结这篇博文,写得有点杂乱,看文要还请费点神. 基 ...

  7. 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

    JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...

  8. C#实现无物理边距 可打印区域的绘图\打印 z

    经常在开发实际的应用程序中,需要用到图形绘制和打印程序.如何实现完整的精确打印和绘图是需要注意许多细节地方的.最近在遇到打印问题的时候,仔细研究一阵,总结这篇博文,写得有点杂乱,看文要还请费点神. 基 ...

  9. WPF打印原理,自定义打印

    一.基础知识 1.System.Printing命名空间 我们可以先看一下System.Printing命名空间,东西其实很多,功能也非常强大,可以说能够控制打印的每一个细节,曾经对PrintDial ...

随机推荐

  1. 高可用集群(crmsh详解)http://www.it165.net/admin/html/201404/2869.html

    crmsh是pacemaker的命令行接口工具,执行help命令,可以查看shell接口所有的一级命令和二级命令,使用cd 可以切换到二级子命令的目录中去,可以执行二级子命令 在集群中的资源有四类:p ...

  2. win7系统安装SQLServer2000的详细步骤(图文)

    首先,如果以前安装的话,要删除干净.我也找了半天的网络资料.1.把原来SQLServer的安装目录 C:\Program Files\Microsoft SQL Server  删除2.所有SQLSe ...

  3. 【Python】Python简介

    Python是一种既使用简单又功能强大的高级编程语言,同时支持面向过程的编程和面向对象的编程. 官方对python的介绍:Python 是一种简单易学,功能强大的编程语言,它有高效率的高层数据结构,简 ...

  4. eclipse中添加配置文件夹config

    1. 在项目上右键->Build path->Configure Build Path->Source下的Add Folder,如图 2. 在弹出框中,Create New Fold ...

  5. 51nod 1206 Picture 矩形周长求并 | 线段树 扫描线

    51nod 1206 Picture 矩形周长求并 | 线段树 扫描线 #include <cstdio> #include <cmath> #include <cstr ...

  6. 手动为容器设置ip地址

    1.安装bridge-utils # aptitude install -y bridge-utils 2.配置网桥 # vim /etc/network/interfaces auto lo ifa ...

  7. Android学习笔记——关于onConfigurationChanged(转)

    从事Android开发,免不了会在应用里嵌入一些广告SDK,在嵌入了众多SDK后,发现几乎每个要求在AndroidManifest.xml申明Activity的广告SDK都会要求加上注明这么一句属性: ...

  8. 解题:CQOI 2017 老C的方块

    题面 看起来很像网络流的二分图套路题,然后我们大力观察(题目定义的相邻我用引号括起来,应该能看懂) 发现“相邻”的一对方格如果各自连着一个一个方格就gg了,于是对于所有这些“相邻”的方格,我们有两种选 ...

  9. 解题:APIO 2012 派遣

    题面 以报酬为标准维护一个大根堆,从根节点往上合并,每次踢掉若干人直到花费合法后更新答案 #include<cstdio> #include<cstring> #include ...

  10. java中的date类型转换为js中的日期显示 我改

    function dateChange(javaDate){ if(javaDate){ return javaDate.substr(0,10).replace(/-/g,"/" ...