问题描述:

    JS实现Web打印,要求打印前一种样式,打印预览时新样式

问题解决:

        (1)设置打印时的css样式,设置打印前的css样式

注:

        以上为print.css打印时的css样式,其中display可以设置当前的css对象是否可见,设置上述css样式为打印时的样式:

如上所示,添加media="print",就可以设置此css样式文件为打印时可见。

注:

        以上为当前页面的样式,起初是隐藏的,在打印预览时,希望显示出来,打印时调用printview的css样式

注:

    如上所示的设置,对于id=“ordernum”的文本框存在两种样式,specialorder和printview样式,其中specialorder为当前页面的样式设置,而printview是打印预览的样式,这样就可以实现,当前页面的元素在打印预览时进行显示。

        (2)通过增加和删除css 类(class)来改变打印前后的样式

注:

        以上函数时设置打印预览页面的JS函数,其中包括打印预览前删除页面的css样式,使用打印的css样式,打印预览关闭之后,增加当前页面的css样式,隐藏print样式

注:

        以上JS函数时删除某个对象的css对象的函数

注:

        以上函数是增加某个对象的css样式

JS Web打印,实现预览新样式的更多相关文章

  1. JS页面打印,预览,设置,分页

    一)在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classi ...

  2. 使用pdf.js在移动端预览pdf文档

    pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. PrintDocument打印、预览、打印机设置和打印属性的方法

    WindowsForm 使用 PrintDocument打印.预览.打印机设置和打印属性的方法. private void Form1_Load(object sender, System.Event ...

  5. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  6. 使用CAD快速看图如何将图纸打印和预览?

    有相关CAD工作经验的小伙伴们都知道,绘制完CAD图纸后是需要借助CAD看图工具来进行查看图纸的,其实CAD快速看图中不仅能够对图纸进行查看,还能够将CAD图纸进行打印出来.但是有很多的伙伴不知道要怎 ...

  7. JS打印、预览(IE,Chrome)

    IE下: 调用IE内置打印组件完成web打印方案.IE调用ActiveX实现打印. 重点: 注意: 1.CSS对打印的控制: .Noprint{display:none;} .PageNext{pag ...

  8. pdf.js实现图片在线预览

    项目需求 前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...

  9. 尝鲜一试,Azure静态网站应用服务(Azure Static Web Apps) 免费预览,协同Github自动发布静态SPA

    背景 最近在浏览微软的文档的时候发现,微软喜欢用Hugo这个文档框架,有些技术产品的文档页面就用Hugo来做的,同时搭配Github + Azure Static Web Apps Service这个 ...

随机推荐

  1. apache Internal Server Error 的几个问题

    Internal Server Error The server encountered an internal error or misconfiguration and was unable to ...

  2. git merge 到 非当前 branch

    1. Add a remote alias for your local repository, ex: git remote add self file:///path/to/your/reposi ...

  3. SpringMvc入门二----HelloWorld

    1. 导入需要的架包: 2. 配置web.xml,添加Servlet <servlet> <servlet-name>springmvc</servlet-name> ...

  4. Bring up a website by wordpress

    WORDPRESS WordPress is web software you can use to create a beautiful website or blog, which is both ...

  5. OpenGL 回顾-——矩形的创建、列表

    在使用四点创建矩形时,必须按照顺序,顺时针或者逆时针,不然会错乱.感觉是根据点的顺序依次连线. glBegin(GL_QUADS); glColor3f(1.0,0.0,0.0); glVertex3 ...

  6. insertorupdate

    MERGE INTO  运用的心得 最近完成一个功能,就是往表里插入数据,以party_id 和prod_id为联合主键,存在的更新,不存在的插入, ORACLE 10g 后可以试用MERGE INT ...

  7. C语言1-100连加,求质数,算瑞年检测字母大小写,登录系统

    #include <stdio.h> void test(){//1+2+3+4+.....+100 int a,b; a=0; b=0; for ( ; a<=100; a++) ...

  8. SPL标准库常用的数据结构

    栈数据结构 $stack = new SplStack(); //栈数据结构->先进后出 2 $stack->push('data1'); //入栈 $stack->push('da ...

  9. JQ中的html()、text()、val()的用法

    <input type="text" val=""> 用val(); <sapn>你好</sapn>  用text() &l ...

  10. Windows Server 2003 IIS支持ASP

    1.ASP支持是很简单的  这里简单的说一下 2.安装IIS服务   这里就不多演示了  很简单的 3.安装完成后打开IIS的扩展功能 ASP代码测试页为: <% response.write( ...