# @formio/js 中文文档规范地址：https://npmcn.com/package/%40formio/js/ 版本：5\.7\.1 npm 元数据更新时间：2026-11-13T16:54:29.310Z 中文译文更新时间：2026-11-15T09:04:04.877Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40formio/js 原文对照：https://npmcn.com/package/%40formio/js/?lang=original 项目主页：https://github.com/formio/formio.js#readme 源码仓库：https://github.com/formio/formio.js ## 关键信息（来自 npm 元数据） - 包体积（解压后）：23.9 MB，1114 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：35 个 - 首次发布：2023-06-08T15:22:34.295Z - 最新版本发布：2026-11-13T16:54:29.116Z - 近 30 天下载量：215027（2026-10-16 至 2026-11-14，npm 官方下载统计） - 已发布版本数：703（近 12 个月 30 个） ## 中文简介带有 JSON 窗体构建器的 JavaScript 动力表单 ## 安装 ```sh npm install @formio/js ``` 也可以使用：`pnpm add @formio/js`、`yarn add @formio/js`、`bun add @formio/js` ## README # JavaScript 为 Form.io 提供动力的表格和 SDK 这个库是一个平版JavaScript格式渲染器和Form.io的SDK. 这使得您可以制作由Form.io所制作的JSON schema格式,并使用平版JavaScript来渲染您的应用程序中的这些格式,同时提供接口SDK来与Form.io API进行通信. 这个图书馆的好处包括:. - Plain JavaScript 使用 ES6 和 Modern 实践执行(无 jQuery, Angular, React 或任何其他框架依赖) - 将 JSON 设计成网络形式,并将该形式连接到 Form.io API 上 - 完整的窗体构建器,它创建了用于制作窗体的 JSON 方案. - 被嵌入的组件、布局、日期/时间、选择、输入面罩以及更多包含的特性 - Full JavaScript API SDK 库在 Form.io 上方 ## 正式文件最新文件、发布资料和指南一律参考本文中提供的官方表格: **[https://help.form.io (英语)](https://help.form.io/dev/form-development/form-renderer)** ## 实例和示范要了解更多关于这个图书馆的信息, 并看到一个演示 [https://formio.github.io/formio.js 互联网档案馆的存檔,存档日期2014-12-21](https://formio.github.io/formio.js) ## 安装要将此 SDK 安装到您的项目中, 您可以在您的终端中使用以下命令 . ``` npm install --save @formio/js ``` ## 窗体大楼这个库有一个非常强大的JSON形式构建器,可以像下面这样被使用. ```html

``` 这将创建一个强大的形式构建器嵌入在您的应用程序中。见 [我们的Demo页面](https://formio.github.io/formio.js/app/builder) 举个例子. ### 窗体构建文档转到 [窗体构建文档](https://help.form.io/dev/form-development/form-builder) 关于开源格式构建器如何工作的完整文档. ## 窗体渲染以下是如何在您的 HTML 应用程序中制作表格的简单实例. ```html

``` 申请表如下:. ![image](https://github.com/user-attachments/assets/51fc2933-6749-4efd-bb0c-06b764d532d6) 您也可以直接创建 JSON , 而不是从 Form.io 中引用嵌入的 URL . ```js Formio.createForm(document.getElementById('formio'), { components: [ { type: 'textfield', key: 'firstName', label: 'First Name', placeholder: 'Enter your first name.', input: true, }, { type: 'textfield', key: 'lastName', label: 'Last Name', placeholder: 'Enter your last name', input: true, }, { type: 'button', action: 'submit', label: 'Submit', theme: 'primary', }, ], }); ``` 这将使JSON在您的申请中成为表单. ### JSFidle 实例使用JSFiddle作为很好的沙盒环境, 这是一个例子,你可以自己叉出叉子! [http://jsfidle.net/travistidwell/z63jvwkp/ (中文(中国大陆) )](http://jsfiddle.net/travistidwell/z63jvwkp/) ### 窗体渲染器文档要更完整地记录如何在您的应用程序中使用此图书馆,请访问 [窗体渲染器](https://help.form.io/dev/form-renderer) 文档. ## 向导渲染此库还可以使用渲染出表单的相同方法在您的应用程序中渲染出表单向导. 对它是否应该成为巫师的威慑是基于 **显示** 窗体图案的属性设定为 `wizard`。。。 . ```html

``` ## 嵌入窗体也可以使用这个库作为JavaScript用一行代码嵌入形式. 例如,嵌入 [https://examples.form.io/example 页面存档备份,存于互联网档案馆](https://examples.form.io/example) 在应用程序中,您只需使用以下嵌入式代码即可. ```html ``` 举个例子说明这看起来和效果,请检查以下 [Form.io 内嵌](https://jsfiddle.net/travistidwell/uys26qpf/) ## 嵌入文档的窗体关于如何嵌入表格的更完整的文件,请访问 [嵌入文档的窗体](https://help.form.io/dev/rendering)。。。 . ## Java 脚本 SDK 除了此应用程序中有一个表格渲染器外,您还可以在应用程序中使用此库作为JavaScript SDK. 例如,要装入窗体,然后提交该窗体,您可以在您的 JavaScript 中完成以下操作 . ```html ``` 您也可以在 ES6 应用程序内使用此功能如下 . ```js import { Formio } from '@formio/js/sdk'; let formio = new Formio('https://examples.form.io/example'); formio.loadForm((form) => { console.log(form); formio .saveSubmission({ data: { firstName: 'Joe', lastName: 'Smith', email: 'joe@example.com', }, }) .then((submission) => { console.log(submission); }); }); ``` ### JavaScript SDK文档. 关于JavaScript SDK的更完整的文档,请查看 [JavaScript SDK 文档](https://help.form.io/dev/javascript-sdk)。。。 . ### 全开发者 API 文档要查看完整的 SDK 文件,请 [开发者 SDK 文档](https://github.com/formio/formio.js/) ## 常见问题 ### @formio/js 是什么？带有 JSON 窗体构建器的 JavaScript 动力表单 ### 如何安装 @formio/js？在项目目录运行 npm install @formio/js，或使用 pnpm add / yarn add / bun add。 ### @formio/js 支持 TypeScript 吗？支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @formio/js 支持 ESM 还是 CommonJS？同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @formio/js 可以商用吗？ @formio/js 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @formio/js 的下载量有多少？根据 npm 官方下载统计，@formio/js 在 2026/10/16 – 2026/11/14 这 30 天内被下载 215,027 次，日均约 7,168 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @formio/js 还在维护吗？最新版本 5\.7\.1 发布于 2026/11/14（2 天前）；至今共发布 703 个版本，其中过去 12 个月发布了 30 个；首次发布于 2023/06/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。