background

In the actual form application, we often encounter how to quickly display the detail page or directly print it after the form is edited. We’ll cover this in more detail in this article.

Design a form

Design the form using FormMaking. Here we use a table layout to design a form that looks like this:

For information on how to design such a form, go to Complex Report Design.

Display form details

When we need to display the details of the form, we just need to configure the parameters of the form component, enable the form print reading, and the form will convert the text box to text type. The Settings are as follows:

<fm-generate-form 
    :data="jsonData" 
    ref="generateForm" 
    :print-read="true" >
</fm-generate-form>
Copy the code

Print -read is set to true.

The form to print

Printing the form is also very simple. We have set the form to print mode, so that the text box disappears and the text is displayed directly. We can call window.print() directly to print the page.

However, sometimes we have other elements on the page, such as the print button, and we don’t want to print them out. In this case, we need to use CSS media query @Media Print to modify the style and achieve the appearance on the printing device.

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
      :print-read="true"
    >
    </fm-generate-form>
    <el-button class="print-btn" type="primary" @click="handlePrint">print</el-button>
  </div>
</template>

<style>
@media print{ .print-btn{ display: none; }}</style>
Copy the code

Let’s look at the final result: