背景
我們在實際的表單應用中，常常會遇到表單編輯好後，如何快速地展示詳情頁面又或者直接能夠打印呢。接下來我們會在本文中詳細道來
設計表單
通過 可視化表單設計器 – FormMaking 設計出表單。這裡我們使用表格布局，設計出如下樣式的表單
關於如何設計出這樣的表單，可以前往複雜報表設計 · 語雀查看。
展示表單詳情
我們需要展示表單詳情的時候，只需要配置表單組件的參數，啟用表單打印閱讀即可，表單就會將文本框轉化為文本類型。設置如下：
<fm-generate-form
:data="jsonData"
ref="generateForm"
:print-read="true" >
</fm-generate-form>
將 print-read 屬性設置成 true 即可，是不是很簡單呢。
表單打印
實現表單打印也是非常簡單的，我們上面已經將表單設置成打印閱讀模式，讓文本框消失，直接展示文本了，我們就可以直接調用 window.print()來實現頁面的打印。
但是，有時我們的頁面上還有其它的元素，比如打印按鈕等，我們不想將其打印出來，這個時候我們就需要使用 CSS 媒體查詢 @media print 來修改樣式，實現在打印設備上的展示效果。
<template>
<div>
<fm-generate-form
:data="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>
我們來看看最後的效果：
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/229982.html
微信掃一掃 
支付寶掃一掃 