Print

The Pro version provides functionality to print forms and export them as PDF files. These operations can be easily implemented through API methods.

This feature is only available in the Pro version of the designer. Learn more about Pro version features

Basic Usage

Print Form

Call the api.print(config) method to print the currently rendered form.

Export as PDF

Call the api.exportPdf(config) method to export the form as a PDF file.

Code Example

Print forms and export PDFs through the API:

<template>
    <div id="app">
        <form-create v-if="rule.length" v-model="formData" v-model:api="fApi" @submit="handleSubmit" :rule="rule"
                     :option="option"></form-create>
        <el-button @click="print">Print Form</el-button>
        <el-button @click="exportPdf">Download PDF</el-button>
    </div>
</template>
<script setup>
    import {formCreate} from '@form-create/designer';
    const rule = ref([]);
    const options = ref({});
    const fApi = ref(null);
    // Form data
    const formData = ref({});
    // Print form
    function print() {
        fApi.print();
    }
    // Download PDF
    function exportPdf() {
        fApi.exportPdf();
    }
    function handleSubmit(formData) {
        // Simulate submitting form data to the backend
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('Submit successful:', response.data);
            })
            .catch(error => {
                console.error('Submit failed:', error);
            });
    }
    onMounted(() => {
        // Simulate loading form JSON rules from the backend
        axios.get('/api/getFormRules')
            .then(response => {
                const {ruleJson, optionsJson, formData} = response.data;
                rule.value = formCreate.parseJson(ruleJson);
                options.value = formCreate.parseJson(optionsJson);
                formData.value = formData;
            })
            .catch(error => {
                console.error('Failed to load form rules:', error);
            });
    });
</script>

Print Custom Area

Customize the print and PDF export area by specifying a DOM element (wrap). This area can include not only form content but also additional custom content, enabling more flexible print output:

<template>
    <div id="app">
        <div class="print-wrap" ref="wrap">
            <form-create v-if="rule.length" v-model="formData" v-model:api="fApi" @submit="handleSubmit" :rule="rule"
                         :option="option"></form-create>
            <div>
                Custom Content
            </div>
        </div>

        <el-button @click="print">Print Form</el-button>
        <el-button @click="exportPdf">Download PDF</el-button>
    </div>
</template>
<script setup>
    import {formCreate} from '@form-create/designer';
    const rule = ref([]);
    const options = ref({});
    const fApi = ref(null);
    const wrap = ref(null);
    // Form data
    const formData = ref({});
    // Print form
    function print() {
        fApi.print({
            el: wrap.value
        });
    }
    // Download PDF
    function exportPdf() {
        fApi.exportPdf({
            el: wrap.value
        });
    }
    function handleSubmit(formData) {
        // Simulate submitting form data to the backend
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('Submit successful:', response.data);
            })
            .catch(error => {
                console.error('Submit failed:', error);
            });
    }

    </script>

Customize Styles

When printing/exporting, the .fc-print-form class name is automatically added to the form. Customize print styles using this class name:

.fc-print-form .el-input__wrapper, .fc-print-form .el-textarea__inner, .fc-print-form .el-select__wrapper {
    box-shadow: none !important;
    border: 1px solid var(--el-input-border-color, var(--el-border-color));
}

Data Structure

typeof config = {
    // Left margin
    left: 20,
    // Right margin
    right: 20,
    // Top margin
    top: 20,
    // Bottom margin
    bottom: 20,
    // Content width
    width: 780,
    // Paper size
    format: 'a4',
    // Custom DOM element for printing, defaults to the form
    el: Document
}