使用jquery.PrintArea.js打印网页的样式问题
在使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来，在网上找了好多资料，整理一下分享给大家
一、先看看css的引用文件方式
1、直接在内部的元素中使用”style”属性来定义样式，比如：<div style=”width:800px;”></div>
2、在<head>元素中使用”style”元素来指定
3、使用<link>元素链接到外部的样式文件，比如：<link rel=”stylesheet” type=”text/css” href=”default.css”>
这三种是比较常见的方式
二、第一种方式：
直接在内部的元素中使用”style”属性来定义样式，然后调用printArea()函数，可打印全屏，可打印局部，样式都是起作用的，代码如下：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
</head>
<body>
<div>
<div id="printArea">
<div style="font-size:18px;color:#ff0000;">......文本打印区域......</div>
<div style="font-size:24px;color:#ff0000;">......文本打印区域......</div>
<div style="font-size:36px;color:#ff0000;">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
第二种方式：
在<head>元素中使用”style”元素来指定，你会发现打印局部网页预览的时候，样式并不起作用，在网上找到得资料是，在<style type="text/css" media="print"></style>
但是你会发现，这样做之后，样式并不起效，不知道是我用错了还是什么，贴上代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
<style type="text/css" media="print">
.content{font-size:36px;color:#ff0000;}
</style>
</head>
<body>
<div>
<div id="printArea">
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
后来弄了好久，才摸索出了解决办法，直接贴上代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>index</title>
</head>
<body>
<div>
<div id="printArea">
<style type="text/css">
.content { font-size: 36px; color: #ff0000; }
</style>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
<div class="content">......文本打印区域......</div>
</div>
<br>
<br>
<input id="btnPrint" type="button" value="打印文本区域" />
<input id="btnPrintFull" type="button" value="全屏打印" />
</div>
<script>
$("#btnPrint").click(function () {
$("#printArea").printArea();
});
$("#btnPrintFull").click(function () {
$("body").printArea();
});
</script>
</body>
把你要打印那块区域的样式放到你要打印的那块区域里面，打印的时候样式就有效了，不需要加media="print"
第三种方式和第二种方式是一样的道理
使用jquery.PrintArea.js打印网页的样式问题的更多相关文章
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- 局部打印插件 jquery.PrintArea.js
(function ($) { var printAreaCount = 0; $.fn.printArea = function () { var ele = $(this); var idPref ...
- jquery.print.js 打印插件
<script language="javascript" src="jquery-1.4.4.min.js"></script> &l ...
- js 打印网页指定内容
function doPrint() { setTimeout(function() { bdhtml=window.document.body.innerHTML; sprnstr="&l ...
- jquery.cycle.js
jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
- js或jquery实现页面打印可局部打印
方法一:直接用js的打印方法 <input id="btnPrint" type="button" value="打印" onclic ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- JS实现网页选取截屏 保存+打印 功能(转)
源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
随机推荐
- [HDU1512/ZOJ2334]Monkey King-左偏树-可合并堆
Problem Monkey King Solution 本题是裸的左偏树,一个模板就可以过了.对于每个操作对节点先删除/2再合并. 注意本题在HDU上评测特别坑,是多组数据,而且经常出现MLE的情况 ...
- [IB配置]PeopleSoft如何重置网关属性administrator密码
当您在登陆主菜单>PeopleTools>继承代理程序>配置>网关>网关设置属性在尝试打开网关属性配置时候,需要输入账号:administrator以及密码,有时候在升级 ...
- 事务之使用JDBC进行事务的操作2
本篇将讲诉如何使用JDBC进行数据库有关事务的操作.在上一篇博客中已经介绍了事务的概念,和在MySQL命令行窗口进行开启事务,提交事务以及回滚事务的操作. 似乎事务和批处理都可以一次同时执行多条SQL ...
- 20170709_python_学习记录
a='ABC';变量赋值时发生了什么 1.在内存中创建一个字符串'ABC' 2.在内存中创建一个变量a指向字符串'ABC' list [] 相当于数组 指向可以变动 str[1,2,3,4] str. ...
- Linux基础（四）
一.系统监控 1.用top命令实时监测CPU.内存.硬盘状态 效果类似Windows的任务管理器,默认每5秒刷新一下屏幕上的显示结果. [root@localhost /]# top top - 17 ...
- npm介绍与cnpm介绍
npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...
- springmvc精讲
转自http://www.cnblogs.com/baiduligang/p/4247164.html
- 【HTML】web语义化
一.解决的问题 & 评价标准 web语义化能解决如下问题: 1. 页面样式丢失 2. 有颜色或其他障碍的访客也能读懂页面 3. 移动设备访问页面 4. 程序(如爬虫)理解页面(换句话说SEO优 ...
- 坏块管理（Bad Block Management，BBM）
看了很多坏块管理的文章,加上自己的理解,把整个坏块管理做了个总结. 坏块分类 1.出厂坏块 又叫初始坏块,厂商会给点最小有效块值(NVB,mininum number of valid blocks) ...
- 前端数据存储方案集合（cookie localStorage等）以及详解 （一）
客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前端存储的问题,因为最近在做小程序相关的内容.但是,在开发过程中,我们难免会遇到 token 存储. 代码缓存. 图片存储等等. 以及可 ...