使用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 ...
随机推荐
- Iterator对对象遍历
//实例对象tables List<Table> tables = new TableManager(getApplicationContext()).queryTables(); sp ...
- MySQL-FAQ
1.ERROR 1130: Host 'xxx' is not allowed to connect to this MySQL server远程连接mysql服务器报上述错误.解决方法:1.改表法. ...
- 将git版本号编译进程序
问题的提出 不管是什么版本管理工具,每一条提交记录都会有一个对应的版本号,一般是一个整数,git是一个hash字符串.不管怎样,这个版本号是唯一的,有时候我们在程序运行的时候会在日志里面输出程序的版本 ...
- 分享一个废弃已久的插件架构 (.Net)
框架介绍 1:将插件暴露的页面数据接口复用到任何 WebForm和Mvc 架构的系统. 2:插件可在线卸载,发布,更新. 3:插件可分布式 独立 部署. 4:插件之间完全解耦,通过Url跳转 相互不需 ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- python机器学习模块安装
环境:RHEL6.5 离线安装 ############################################################################ 一,本地yum ...
- 电脑装windows与Centos双系统时引导问题
(本文对电脑如何装windows系统和centos系统不进行详细赘述.) 电脑装双系统时,首先要安装windows系统,在硬盘中划分一块空闲的分区,用来安装centos系统(可以借助"软碟通 ...
- 【Mysql】Mysql关键字
ADD ALL ALTER ANALYZE AND AS ASC ASENSITIVE BEFORE BETWEEN BIGINT BINARY BLOB BOTH BY CALL CASCADE C ...
- Django中ORM模型总结(一)[概述，查询语句]
理解ORM框架 概述 O:(objects)->类和对象. R:(Relation)->关系,关系数据库中的表格. M:(Mapping)->映射. 作用: 可以通过类和类对象就可以 ...
- scanf返回值问题
在家养病,闲着没事看C primer plus,看到书中对于scanf输入的判断,常用如下方法: 此时它将返回1视为我输入成功,如果不为1则视为输入失败.那到底scanf的返回值具体指的是什么呢? 例 ...