JS Web打印,实现预览新样式

时间:2022-05-24 03:05:19

问题描述:

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

问题解决:

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

JS   Web打印,实现预览新样式

注:

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

JS   Web打印,实现预览新样式

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

JS   Web打印,实现预览新样式

注:

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

JS   Web打印,实现预览新样式

注:

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

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

JS   Web打印,实现预览新样式

注:

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

JS   Web打印,实现预览新样式

注:

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

JS   Web打印,实现预览新样式

注:

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