使用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 ...
随机推荐
- 64位win7安装jdk和eclipse
本人正确安装成功步骤,对他人可能无用: 1.直接拷以前32位eclipse ADT 2.安装32位的jdk:jdk-8u45-windows-i586 3.ok,所有环境变量无需手工设置 eclips ...
- 虚拟机配置静态IP地址
使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...
- etcd raft如何实现成员变更
成员变更在一致性协议里稍复杂一些,由于不同的成员不可能在同一时刻从旧成员组切换至新成员组,所以可能出现两个不相交的majority,从而导致同一个term出现两个leader,进而导致同一个index ...
- Servlet转发到JSP页面的路径问题
一.现象与概念 1. 问题 在Servlet转发到JSP页面时,此时浏览器地址栏上显示的是Servlet的路径,而若JSP页面的超链接还是相对于该JSP页面的地址且该Servlet和该JSP页面不在同 ...
- Es6 新增函数
====函数的扩展 -----ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- ASP.NET MVC HttpPostedFileBase文件上传
HttpPostedFileBase文件上传,支持多文件一次上传,如有图片,则支持略缩图保存 文件传输信息封装 /// <summary> /// 文件生成方式 /// </summ ...
- Delphi Screen.DataModuleCount 总是返回 0！Delphi 的 Bug？ DataModuleCount = 0
今天遇到一个很隐蔽的 Delphi 问题,不知做了什么,有一个功能总是不能使用,后来跟踪以下发现是因为 Screen.DataModuleCount 总是返回 0,而程序中一个函数正好要用到 ...
- .Net中关于相等的问题
在.Net框架中,如果您查看所有类型的的基类:System.Object类,将找到如下4个与相等判断的方法: static Equals() virtual Equals() static Refer ...
- 【Django】request 处理流程（转）
Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...
- Redis各种数据结构性能数据对比和性能优化实践
很对不起大家,又是一篇乱序的文章,但是满满的干货,来源于实践,相信大家会有所收获.里面穿插一些感悟和生活故事,可以忽略不看.不过听大家普遍的反馈说这是其中最喜欢看的部分,好吧,就当学习之后轻松一下. ...