博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web打印总结
阅读量:5820 次
发布时间:2019-06-18

本文共 2949 字,大约阅读时间需要 9 分钟。

 一、打印样式

  区别显示和打印的样式

   使用media="print"控制打印时的样式,如下:

打印时不显示打印按钮,设置页面宽度

    

  使用独立的样式文件

  css里media的使用

  我们在网页里引用外部的css文件时,通常是用如下的代码:<link rel="stylesheet" type="text/css" href="mycss.css">  

实际上,上面的link对象里,我们是省略了一个叫“media”的属性,这个属性指定样式表规则用于指定的设备类型。它有如下值可用:

all-- 用于所有设备类型 
aural-- 用于语音和音乐合成器 
braille-- 用于触觉反馈设备 
embossed-- 用于凸点字符(盲文)印刷设备 
handheld-- 用于小型或手提设备 
print-- 用于打印机 
projection-- 用于投影图像,如幻灯片 
screen-- 用于计算机显示器 
tty-- 用于使用固定间距字符格的设备。如电传打字机和终端 
tv-- 用于电视类设备

这么多的值,并不是每个都可用,因为浏览器厂商并没有全部实现它们。

二、分页打印

   打印需要分页时,但是自动分页又无法满足自己的需求时,需要手动分页

css里用于打印的属性

page-break-after : auto | always | avoid | left | right | null

参数:

auto : 假如需要在对象之后插入页分割符 

always :始终在对象之后插入页分割符 
avoid : 避免在对象后面插入页分割符 
left : 在对象后面插入页分割符直到它到达一个空白的左页边 
right :在对象后面插入页分割符直到它到达一个空白的右页边 
null : 空值。IE5用来取消页分割符设置

这个page-break-after,主要用来在打印时插入一个分页符,分页就靠它了。它还有个双胞胎的兄弟,叫page-break-before,参数和它一样,看名字即知道它是用来在对象之前插入分页符。

 示例如下:

      
Paginated HTML

This is Page 1

This is Page 2

This is Page 3

打印模板

   关于.NET实现按模板分页的部分关键代码

样式

 

html

提醒:在非ie打印预览时,通过预览界面的“更多设置”去掉页面上的页眉页脚。  

 

@for (int index = 0; index < Model.List.Count;)        {            

@string.Format("{0}服务周报", Model.CompanyName)

甲方名称 @Model.PartyACompanyName 日期 @Model.StartDate@Model.EndDate

@{ for (var j = 0; j < 40; j++) { if (index < Model.List.Count) {
index++; } } }
序号 标题 姓名
@(index + 1) @Model.List[index].Title @Model.List[index].UserName
甲方: ____________
日期: ____________
乙方: ____________
日期: ____________
第@((index + 1) / 40 + (index % 40 > 0 ? 1 : 0))页
}

脚本

    

 

参考与分享:

转载地址:http://umzdx.baihongyu.com/

你可能感兴趣的文章
基础:Servlet(一)
查看>>
桌面数据库绿色版
查看>>
编码习惯之参数校验和国际化规范
查看>>
链表练习题3-城市查找问题
查看>>
只做重要的事情:ElephantBItes任务督促
查看>>
PHP中转访问脚本一枚
查看>>
Linux配置Java Android, NDK 环境模板
查看>>
phantom挂起的问题
查看>>
如何编写健壮的Bash脚本(经验分享)
查看>>
图解机器学习
查看>>
PHP框架Laravel学习:源码分享
查看>>
js在线编辑器
查看>>
ortp库入门
查看>>
【算法-排序之一】冒泡排序
查看>>
eclipse中的两种JRE
查看>>
使用Gradle和Sonatype Nexus 搭建私有maven仓库
查看>>
使用onbeforeunload事件检测窗口是否刷新或关闭
查看>>
UML建模之时序图(Sequence Diagram)
查看>>
Spring的AOP配置
查看>>
Banana pi BPI-M2 uboot 2015-7 and kernel 4.1.6 tes
查看>>