使用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 ...
随机推荐
- oracle默认用户名及密码
oracle默认用户名及密码(网摘) (1)user: internal password :oracle (2)user: s ...
- MetaWebBlogApi开发经验
背景 花了一天的时间为某笔记软件开发了一款插件,能够发布笔记到博客园,本文就是记录开发时遇到的问题和解决方案,希望有大佬能开发出更好用的博客编辑器. 为什么要开发? 现在有很多开源的建站工具hexo, ...
- ant在持续集成的应用
一.Ant概述 Ant是一个Apache基金会下的跨平台的构建工具,它是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具. 在本文中,我主要让介绍Ant的命令.构建文件.最后部分以一个实 ...
- THINKPHP 3.2 PHP SFTP上传下载 代码实现方法
一.SFTP介绍:使用SSH协议进行FTP传输的协议叫SFTP(安全文件传输)Sftp和Ftp都是文件传输协议.区别:sftp是ssh内含的协议(ssh是加密的telnet协议), 只要sshd服 ...
- 回味Python2.7——笔记4
一.Python 标准库概览 1.操作系统接口 os 模块提供了很多与操作系统交互的函数: >>> import os >>> os.getcwd() # Retu ...
- css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- XRouter-像Retrofit一样使用阿里开源路由中间件
XRouter 一种基于Arouter的使用封装方案,实现对ARouter的Retrofit式使用. ARouter是阿里巴巴开源的Android平台中对页面.服务提供路由功能的中间件,没用过的务必点 ...
- ibatis 参数和结果的映射处理
SqlMapClient对象 这个对象是iBatis操作数据库的接口(执行CRUD等操作),它也可以执行事务管理等操作.这个类是我们使用iBATIS的最主要的类.它是线程安全的.通常,将它定义为单例. ...
- codeforces 475D. CGCDSSQ
D. CGCDSSQ time limit per test 2 seconds memory limit per test 256 megabytes Given a sequence of int ...
- React Native 系列(一) -- JS入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...