签署人JS

网络组件让用户绘制,打入或上传他们的签名,并作为PNG返回.

现场演示 • 妇女 文档 • 妇女 反应 • 妇女 阴道

安装

npm install @docuseal/signature-maker-js
# or
yarn add @docuseal/signature-maker-js

import '@docuseal/signature-maker-js'

导入软件包注册 <signature-maker> 键。 导入在服务器端提供的应用程序中是安全的 。 没有捆绑器,从CDN装入:

<script src="https://cdn.jsdelivr.net/npm/@docuseal/signature-maker-js@1/dist/index.cjs.js"></script>

使用量

不需要 JavaScript: 提交按钮下载签名为 PNG .

<signature-maker data-download-on-save="true"></signature-maker>

用户点击时处理签名 提交 :

<signature-maker id="signatureMaker"></signature-maker>

<script>
  signatureMaker.addEventListener('save', (e) => {
    fetch('/save-signature', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ file: e.detail.base64 }),
    })
  })
</script>

嵌入一个没有提交按钮的表格。 嵌入的文件输入在每次更改时都会收到 PNG :

<form method="POST" action="/submit-form">
  <input name="name" type="text">
  <signature-maker data-with-submit="false">
    <input type="file" name="signature">
  </signature-maker>
  <button type="submit">Submit</button>
</form>

与 CSS 类重排并翻译标签. 一个完整的 DaisyUI 例子 :

<signature-maker
  class="block my-8"
  data-save-button-text="Télécharger"
  data-undo-button-text="Annuler"
  data-clear-button-text="Clair"
  data-draw-type-button-text="Dessiner"
  data-text-type-button-text="Type"
  data-upload-type-button-text="Télécharger"
  data-text-input-placeholder="Tapez votre signature ici"
  data-type-buttons-container-class="flex gap-2 mb-4 justify-center"
  data-draw-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-draw-type-button-active-class="bg-neutral text-white font-semibold"
  data-text-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-text-type-button-active-class="bg-neutral text-white font-semibold"
  data-upload-type-button-class="flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold"
  data-upload-type-button-active-class="bg-neutral text-white font-semibold"
  data-text-input-class="input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl"
  data-canvas-class="bg-white border border-base-300 rounded-2xl w-full"
  data-undo-button-class="btn btn-outline btn-sm font-medium"
  data-clear-button-class="btn btn-outline btn-sm font-medium"
  data-save-button-class="btn btn-neutral text-white text-base w-full"
>
</signature-maker>

活动

该元素也暴露 enableDrawPanel(), (中文(简体) ), enableTextPanel(), (中文(简体) ), enableUploadPanel() 及其基础 签名( p) 实例 pad。包含类型脚本申报;有效载荷类型是 SignatureDetail数字 :

import type { SignatureDetail } from '@docuseal/signature-maker-js'

el.addEventListener('save', (e: CustomEvent<SignatureDetail>) => console.log(e.detail.base64))

属性

行为:

标签 : data-save-button-text, (中文(简体) ), data-undo-button-text, (中文(简体) ), data-clear-button-text, (中文(简体) ), data-draw-type-button-text, (中文(简体) ), data-text-type-button-text, (中文(简体) ), data-upload-type-button-text, (中文(简体) ), data-text-input-placeholder。 。 。 .

样式: 以下每个元素都接受 data-<element>-class 财务报告和审定财务报表 data-<element>-style。一个类取代默认的内行样式,一个样式将凌驾于这些样式之上。 状态变体被附加在基类或样式上.

示例 data-draw-type-button-class="tab" 加号 data-draw-type-button-active-class="tab-active" 调制 class="tab tab-active" 在选中 Draw 时 .

许可证

麻省理工学院