# @docuseal/signature-maker-js 中文文档

规范地址：https://npmcn.com/package/%40docuseal/signature-maker-js/

版本：1\.1\.1
npm 元数据更新时间：2026-11-08T20:42:41.903Z
中文译文更新时间：2026-11-12T14:26:03.792Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40docuseal/signature-maker-js
原文对照：https://npmcn.com/package/%40docuseal/signature-maker-js/?lang=original
项目主页：https://github.com/docusealco/signature-maker-js#readme
源码仓库：https://github.com/docusealco/signature-maker-js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：152 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：1 个
- 首次发布：2024-09-17T13:55:36.895Z
- 最新版本发布：2026-11-08T20:42:41.738Z
- 近 30 天下载量：40564（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 2 个）

## 中文简介

JS 用于绘图、打字和上传签名的图书馆

## 安装

```sh
npm install @docuseal/signature-maker-js
```

也可以使用：`pnpm add @docuseal/signature-maker-js`、`yarn add @docuseal/signature-maker-js`、`bun add @docuseal/signature-maker-js`

## README

[![Signature Maker](https://github.com/user-attachments/assets/305904a9-291f-416d-ac32-baaf22970450)](https://www.docuseal.com/online-signature)

# 签署人JS

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

[现场演示](https://www.docuseal.com/online-signature) • 妇女 [文档](https://www.docuseal.com/docs/embedded/signature#js) • 妇女 [反应](https://github.com/docusealco/signature-maker-react) • 妇女 [阴道](https://github.com/docusealco/signature-maker-vue)

## 安装

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

```js
import '@docuseal/signature-maker-js'
```

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

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

## 使用量

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

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

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

```html
<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 :

```html
<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 例子 :

```html
<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>
```

## 活动

| 活动 | 何时 | `e.detail` |
| --- | --- | --- |
| `save` | 单击后提交按钮 | `{ base64, blob }` |
| `change` | 绘图、打出、上传或清除的签名 | `{ base64, blob }`两者 `null` 空时 |

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

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

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

## 属性

行为:

| 属性 | 默认 | 说明 |
| --- | --- | --- |
| `data-with-drawn` | `true` | 显示绘图标签 |
| `data-with-typed` | `true` | 显示类型标签 |
| `data-with-upload` | `true` | 显示上传标签 |
| `data-with-color-select` | `true` | 显示笔色拾取器 |
| `data-with-submit` | `true` | 显示提交按钮 |
| `data-download-on-save` | `false` | 在提交时下载 PNG |
| `data-font-url` | 舞蹈脚本 | 用于打字签名的 WOFF 字体 |

标签 : `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`。一个类取代默认的内行样式,一个样式将凌驾于这些样式之上。 状态变体被附加在基类或样式上.

| 元素 | 国家变式 |
| --- | --- |
| `save-button` | `disabled-class`, (中文(简体) ), `disabled-style` |
| `draw-type-button`, (中文(简体) ), `text-type-button`, (中文(简体) ), `upload-type-button` | `active-class`, (中文(简体) ), `active-style` |
| `undo-button`, (中文(简体) ), `clear-button`, (中文(简体) ), `text-input`, (中文(简体) ), `canvas`, (中文(简体) ), `type-buttons-container`, (中文(简体) ), `control-buttons-container` |  |

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

## 许可证

麻省理工学院

## 常见问题

### @docuseal/signature-maker-js 是什么？

JS 用于绘图、打字和上传签名的图书馆

### 如何安装 @docuseal/signature-maker-js？

在项目目录运行 npm install @docuseal/signature-maker-js，或使用 pnpm add / yarn add / bun add。

### @docuseal/signature-maker-js 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @docuseal/signature-maker-js 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @docuseal/signature-maker-js 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @docuseal/signature-maker-js 可以商用吗？

@docuseal/signature-maker-js 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @docuseal/signature-maker-js 的下载量有多少？

根据 npm 官方下载统计，@docuseal/signature-maker-js 在 2026/10/13 – 2026/11/11 这 30 天内被下载 40,564 次，日均约 1,352 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @docuseal/signature-maker-js 还在维护吗？

最新版本 1\.1\.1 发布于 2026/11/09（4 天前）；至今共发布 4 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/09/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。