1. 首頁 > 生活 > >

各種表單模板大全圖 表格模板軟件

小知識表格模板軟件



文章插圖
各種表單模板大全圖 表格模板軟件

文章插圖

背景
【各種表單模板大全圖 表格模板軟件】我們在實際的表單應用中 ， 常常會遇到表單編輯好后 ， 如何快速地展示詳情頁面又或者直接能夠打印呢 。接下來我們會在本文中詳細道來
設計表單
通過 可視化表單設計器 – FormMaking 設計出表單 。這里我們使用表格布局 ， 設計出如下樣式的表單
關于如何設計出這樣的表單 ， 可以前往復雜報表設計 · 語雀查看 。
展示表單詳情
我們需要展示表單詳情的時候 ， 只需要配置表單組件的參數 ， 啟用表單打印閱讀即可 ， 表單就會將文本框轉化為文本類型 。設置如下：
<fm-generate-form:data="http://www.mnbkw.com/jxjc/187764/jsonData"ref="generateForm":print-read="true" ></fm-generate-form>
將 print-read 屬性設置成 true 即可 ， 是不是很簡單呢 。
表單打印
實現表單打印也是非常簡單的 ， 我們上面已經將表單設置成打印閱讀模式 ， 讓文本框消失 ， 直接展示文本了 ， 我們就可以直接調用 window.print()來實現頁面的打印 。
但是 ， 有時我們的頁面上還有其它的元素 ， 比如打印按鈕等 ， 我們不想將其打印出來 ， 這個時候我們就需要使用 CSS 媒體查詢 @media print 來修改樣式 ， 實現在打印設備上的展示效果 。
<template><div><fm-generate-form:data="http://www.mnbkw.com/jxjc/187764/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>我們來看看最后的效果：