打印表单

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

这个功能仅在 Pro 版本的设计器中提供。 详细了解 Pro 版本功能

基本使用方法

打印表单

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

导出为PDF

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

代码示例

通过 api 打印表单和导出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 '@form-create/designer';
    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>

打印自定义区域

通过指定DOM元素（wrap）来自定义打印和导出PDF的区域，不仅包含表单内容，还可以添加额外的自定义内容，实现更灵活的打印输出效果。

<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>
                自定义内容
            </div>
        </div>


<el-button @click="print">打印表单</el-button>
        <el-button @click="exportPdf">下载 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);
    //表单数据
    const formData = ref({});
    //打印表单
    function print() {
        fApi.print({
            el: wrap.value
        });
    }
    //下载 PDF
    function exportPdf() {
        fApi.exportPdf({
            el: wrap.value
        });
    }
    function handleSubmit(formData) {
        // 模拟提交表单数据到后端
        axios.post('/api/submitFormData', formData)
            .then(response => {
                console.log('提交成功:', response.data);
            })
            .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));
}

数据结构

typeof config = {
    //左边距
    left: 20,
    //右边距
    right: 20,
    //上边距
    top: 20,
    //下边距
    bottom: 20,
    //内容宽度
    width: 780,
    //纸张尺寸
    format: 'a4',
    //打印自定义dom, 默认为表单
    el: Document
}