阅读 100

表单设计模板软件(各种表单模板大全图 )

背景

我们在实际的表单应用中,常常会遇到表单编辑好后,如何快速地展示详情页面又或者直接能够打印呢。接下来我们会在本文中详细道来

设计表单


通过 设计出表单。这里我们使用表格布局,设计出如下样式的表单

关于如何设计出这样的表单,可以前往查看。

展示表单详情

我们需要展示表单详情的时候,只需要配置表单组件的参数,启用表单打印阅读即可,表单就会将文本框转化为文本类型。设置如下:


将 print-read 属性设置成 true 即可,是不是很简单呢。

表单打印

实现表单打印也是非常简单的,我们上面已经将表单设置成打印阅读模式,让文本框消失,直接展示文本了,我们就可以直接调用 window.print()来实现页面的打印。

但是,有时我们的页面上还有其它的元素,比如打印按钮等,我们不想将其打印出来,这个时候我们就需要使用 CSS 媒体查询 @media print 来修改样式,实现在打印设备上的展示效果。




我们来看看最后的效果:

文章分类
百科问答
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐