print打印页生成及排版样式更改的技巧

<script>
function myPrint(obj){
//注:可以在打印页生成前前通过js更改样式,来实现排版,打印页生成后通过setTimeout延迟将页面样式变回去
//打开一个新窗口newWindow
var newWindow=window.open("打印窗口","_blank",‘height=300,widht=400‘);
//要打印的div的内容
var docStr = obj.innerHTML;
//打印内容写入newWindow文档
newWindow.document.write(docStr);
//关闭文档
newWindow.document.close();
//调用打印机
newWindow.print();

//注:打印页生成后可以通过setTimeout延迟将页面样式变回去
//关闭newWindow页面
newWindow.close();

}

// myPrint(document.getElementById(‘printDivID‘));//调用方法
</script>
<div id="print">
<hr />
打印演示区域,点击打印后会在新窗口加载这里的内容!
<hr />
</div>
<button onclick="myPrint(document.getElementById(‘print‘))">打 印</button>

时间: 2024-10-30 14:57:45

print打印页生成及排版样式更改的技巧的相关文章

CSS控制print打印样式

来源:http://blog.csdn.net/pangni/article/details/6224533 一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:   用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />   用于打印的css:<link rel="stylesheet&

自动生成宣传单打印页--提高工作效率

公司每次搞促销活动都需要制作大量的单品宣传单页,如果靠美工手动去做,需要大量的时间,最近刚刚更新了公司商城首页,不是很忙,就琢磨着开发一个自动生成宣传单页的功能,于是所做就做,流程如下: 1.使用的是火狐浏览器的打印功能,其他浏览器并未测试,因为这是内部使用功能,亦无需兼容其他浏览器. 此处注意打印预览时将边距设为0,并选择打印背景(颜色和图片). 2.商城每个产品都有详情页,可以很容易获取到信息,于是我们要做的就是将这些信息排成我们需要打印出来的样式 首先是背景尺寸:1205*1730,这个尺

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear

Web window.print() 打印

web打印 window.print() 我只给出比较有效的,方便的打印方法,有些WEB打印是调用ActiveX控件的,这样就需要用户去修改自己IE浏览器的Internet选项里的安全里的ActiveX,将它们全部启用,有些麻烦,翻了下网络, 下面的方法是可以直接打印,而不会去修改IE的Internet选项. window.print来打印页面,页面上别的元素也会被打印处理,页头页尾的格式也不好控制.• 常用方法:大部分情况会把查询的结果绑定到DataGrid上来,然后打印DataGrid.这种

print打印网页相关

作者:zccst 1,CSS <link href="/style/print.css" rel="stylesheet" type="text/css" media="print"> /style/print.css文件 .noprint{display:none;} 在testPrint.html中使用print.css中的样式,在网页浏览的时候是看不出效果的,但是打印的时候会起作用,如下面这一段,加上nopr

如何为要被打印的内容设置CSS样式属性

如何为要被打印的内容设置CSS样式属性:有时候我们要打印的内容也是需要美观度的,并不希望太原汁原味了,所以要对其进行一下样式设置,本章节就简单介绍一下,如何利用CSS设置要被打印内容的样式,方式有多种,下面一一做一下简单介绍.一.使用link引入外部样式表: <link rel="stylesheet" href="css/style.css" media="screen" /> 以上代码的CSS样式用于屏幕显示效果,对于打印无效.关

window.print()打印页面指定内容(使用iframe保证原页面不失效)

使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来-->这样会导致原来页面事件失效 使用iframe即可打印指定内容,也可保证页面不失效,具体方法如下: 1.将打印的内容独立出来为一个print.html文件,并为页面添加打印事件 <!DOCTYPE html> <html> <head> ... </head

第 2 章 排版样式

学习要点:1.页面排版 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面主体.对齐.列表等常规内容. 一.页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用.1.页面主体Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 10px):颜色被设置为#333.//创建包含段落突出的文本<

input range样式更改,模拟滑块

input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <input type="range" min="0" max="5" step="0.1" value="0"> <span class="lightgray"></span> <span class="value&quo