打印表单
高级版提供了表单打印和导出为 PDF 的功能,通过 API 方法可以方便地实现这些操作。
基本使用方法
打印表单
调用 api.print(config)
方法可以打印当前渲染的表单
导出为PDF
调用 api.exportPdf(config)
方法可以将表单导出为 PDF 文件
代码示例
通过 api 打印表单和导出PDF
vue
<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>
打印自定义区域
通过指定DOM元素(wrap)来自定义打印和导出PDF的区域,不仅包含表单内容,还可以添加额外的自定义内容,实现更灵活的打印输出效果。
vue
<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 'path/to/fcDesignerPro';
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
类名,可以通过这个类名自定义打印样式:
css
.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));
}
数据结构
ts
typeof config = {
//左边距
left: 20,
//右边距
right: 20,
//上边距
top: 20,
//下边距
bottom: 20,
//内容宽度
width: 780,
//纸张尺寸
format: 'a4',
//打印自定义dom, 默认为表单
el: Document
}