打印表单

高级版提供了表单打印和导出为 PDF 的功能，通过 API 方法可以方便地实现这些操作。

基本使用方法

打印表单

调用 api.print() 方法可以打印当前渲染的表单

导出为PDF

调用 api.exportPdf() 方法可以将表单导出为 PDF 文件

代码示例

<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">打印表单</el-button>
        <el-button @click="exportPdf">下载 PDF</el-button>
    </div>
</template>
<script setup>
    import {formCreate} from 'path/to/fcDesignerPro';
    const rule = ref([]);
    const options = ref({});
    const fApi = ref(null);
    //表单数据
    const formData = ref({});
    //打印表单
    function print() {
        fApi.print();
    }
    //下载 PDF
    function exportPdf() {
        fApi.exportPdf();
    }
    function handleSubmit(formData) {
        // 模拟提交表单数据到后端
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('提交成功:', response.data);
            })
            .catch(error => {
                console.error('提交失败:', error);
            });
    }
    onMounted(() => {
        // 模拟从后端加载表单JSON规则
        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('加载表单规则失败:', error);
            });
    });
</script>

定制样式

打印/导出时会给表单自动添加 .fc-print-form 类名，可以通过这个类名自定义打印样式：

.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));
}