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


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

文章插图

背景我们在实际的表单应用中,常常会遇到表单编辑好后,如何快速地展示详情页面又或者直接能够打印呢 。接下来我们会在本文中详细道来
设计表单通过 可视化表单设计器 – FormMaking 设计出表单 。这里我们使用表格布局,设计出如下样式的表单
关于如何设计出这样的表单,可以前往复杂报表设计 · 语雀查看 。
展示表单详情我们需要展示表单详情的时候,只需要配置表单组件的参数,启用表单打印阅读即可,表单就会将文本框转化为文本类型 。设置如下:
<fm-generate-form:data="https://www.520longzhigu.com/shenghuo/jsonData"ref="generateForm":print-read="true" ></fm-generate-form>将 print-read 属性设置成 true 即可,是不是很简单呢 。
表单打印实现表单打印也是非常简单的,我们上面已经将表单设置成打印阅读模式,让文本框消失,直接展示文本了,我们就可以直接调用 window.print()来实现页面的打印 。
但是,有时我们的页面上还有其它的元素,比如打印按钮等,我们不想将其打印出来,这个时候我们就需要使用 CSS 媒体查询 @media print 来修改样式,实现在打印设备上的展示效果 。
<template><div><fm-generate-form:data="https://www.520longzhigu.com/shenghuo/jsonData"ref="generateForm":print-read="true"></fm-generate-form><el-button class="print-btn" type="primary" @click="handlePrint">打印</el-button></div></template><style>@media print{ .print-btn{ display: none; } }</style>我们来看看最后的效果:


    以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: