DocuSeal 表单构建器 React 组件深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00123/article/details/148418980

DocuSeal 表单构建器 React 组件深度解析

docuseal docusealco/docuseal: DocuSeal 可能是一个文档安全或数字签名解决方案的软件项目，但根据GitHub上信息不足无法确定具体细节。它可能用于保护文档的安全性、提供电子签名功能或者进行文档生命周期管理。项目地址: https://gitcode.com/gh_mirrors/do/docuseal

组件概述

DocuSeal 表单构建器 React 组件是一个强大的工具，允许开发者在 React 应用中无缝集成文档表单创建功能。该组件提供了完整的表单设计界面，用户可以直接在网页应用中创建、编辑和配置电子签名表单。

快速开始

要在 React 项目中使用 DocuSeal 表单构建器，首先需要安装相关依赖：

npm install @docuseal/react

然后按照以下基本示例代码集成到你的应用中：

import React, { useState, useEffect } from 'react';
import { DocusealBuilder } from '@docuseal/react'

const App = () => {
  const [token, setToken] = useState();

  useEffect(() => {
    fetch('/api/docuseal/builder_token', {
      method: 'POST',
    })
      .then((response) => response.json())
      .then((data) => {
        setToken(data.token);
      });
  }, []);

  return token && <DocusealBuilder token={token} />;
};

核心配置详解

JWT 令牌生成

安全是表单构建的关键，DocuSeal 使用 JWT (JSON Web Token) 进行身份验证。令牌应在后端生成，包含以下关键信息：

const jwt = require('jsonwebtoken');

const token = jwt.sign({
  user_email: '管理员邮箱',
  integration_email: '签署者邮箱',
  external_id: '表单唯一标识',
  name: '表单名称',
  document_urls: ['PDF文档URL数组'],
}, 'API密钥');

主要属性配置

表单构建器提供了丰富的配置选项，以下是一些关键属性：

文档相关配置：
- document_urls: 预加载的PDF文档URL数组
- template_id: 要编辑的模板ID
- name: 新模板名称
界面显示控制：
- withTitle: 控制是否显示文档标题
- withSendButton: 控制发送按钮显示
- withUploadButton: 控制上传按钮显示
- language: 设置界面语言(支持多国语言)
字段配置：
- fields: 预定义字段数组
- fieldTypes: 允许使用的字段类型
- drawFieldType: 默认绘图工具字段类型
样式定制：
- backgroundColor: 背景颜色
- customCss: 自定义CSS样式

高级功能

预定义字段

可以通过fields属性预定义表单字段，每个字段可以配置多种属性：

{
  "name": "signature_field",
  "type": "signature",
  "role": "signer",
  "width": 200,
  "height": 100,
  "validation": {
    "pattern": "^.{3,}$",
    "message": "签名至少需要3个字符"
  }
}

回调函数

组件提供了多个回调函数，让你可以响应构建器的各种事件：

<DocusealBuilder
  token={token}
  onLoad={(data) => console.log('加载完成:', data)}
  onChange={(data) => console.log('表单变更:', data)}
  onSave={(data) => console.log('保存成功:', data)}
/>