热门搜索:

formio/uswds-viewer

formio

USWDS查看器，用于Form.io PDF服务器。

1 次收藏下载次数: 0状态：社区镜像维护者：formio仓库类型：镜像最近更新：1 个月前

镜像标签列表与下载命令

Form.io 美国Web设计系统(USWDS)模板

1. 镜像概述与主要用途

本镜像/库用于修改formio.js的表单渲染逻辑，使其生成与美国Web设计系统 (USWDS)框架兼容的HTML结构和CSS类。同时作为Form.io PDF服务器的USWDS查看器，支持以符合联邦设计标准的样式展示和处理表单内容及PDF文档。

2. 核心功能与特性

USWDS框架兼容：表单渲染输出完全符合美国Web设计系统的界面规范
无缝集成formio.js：作为formio.js插件运行，无需修改核心库代码
双模式支持：同时提供表单渲染器和表单构建器功能
资源依赖管理：明确整合USWDS和formiojs的官方资源，确保样式一致性
多集成方式：支持JavaScript模块导入和HTML页面直接嵌入两种使用模式

3. 使用场景与适用范围

美国联邦***及相关机构的Web应用开发
需要符合USWDS设计标准的Form.io表单应用
***数字化服务平台中的表单系统构建
要求满足联邦无障碍标准(Section 508)的Web表单项目
Form.io PDF服务器的前端展示层，需符合***设计规范的场景

4. 使用方法与配置说明

4.1 基本使用方式

4.1.1 JavaScript模块导入

适用于现代前端工程化项目：

javascript
import uswds from '@formio/uswds';
import { Formio } from 'formiojs';

// 注册USWDS模板插件
Formio.use(uswds);

// 后续可通过Formio.createForm()渲染表单

4.1.2 HTML页面直接嵌入

适用于传统静态页面集成：

html
<html>
    <head>
        <!-- USWDS核心样式 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css">
        <!-- formiojs完整样式 -->
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <!-- USWDS模板样式 -->
        <link rel="stylesheet" href="dist/uswds.css">
        
        <!-- USWDS核心脚本 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <!-- formiojs完整脚本 -->
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <!-- USWDS模板脚本 -->
        <script src="dist/uswds.js"></script>
    </head>
    <body>
        <!-- 表单容器 -->
        <div id="formio"></div>
        
        <script type="text/javascript">
            // 应用USWDS模板
            Formio.use(uswds);
            // 从Form.io项目加载并渲染表单
            Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
        </script>
    </body>
</html>

4.2 表单构建器集成

可在应用中嵌入USWDS风格的Form.io表单构建器：

html
<html>
    <head>
        <!-- 引入与表单渲染相同的依赖资源 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <link rel="stylesheet" href="dist/uswds.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <script src="dist/uswds.js"></script>
    </head>
    <body>
        <!-- 构建器容器 -->
        <div id="builder"></div>
        
        <script type="text/javascript">
            Formio.use(uswds);
            // 初始化表单构建器
            Formio.builder(document.getElementById('builder'));
        </script>
    </body>
</html>

4.3 配置说明

4.3.1 依赖资源要求

USWDS资源：建议使用2.6.0版本以确保兼容性，可替换为其他兼容版本
formiojs资源：必须使用完整版(formio.full.min.js)以获得完整功能支持
模板资源：uswds.css和uswds.js需与应用代码一同部署

4.3.2 资源路径配置

外部CDN资源：可根据网络环境替换为国内镜像或私有CDN
本地资源部署：模板文件(uswds.css/uswds.js)建议放置在应用的dist目录下

5. Docker部署方案示例

5.1 Dockerfile

基于Node.js环境构建的示例：

dockerfile
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm install @formio/uswds formiojs

# 构建应用(假设使用webpack等构建工具)
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5.2 docker-compose配置

yaml
version: '3.8'

services:
  uswds-form-app:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./dist:/usr/share/nginx/html
    environment:
      - USWDS_CSS_URL=https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css
      - FORMIO_JS_URL=https://cdn.form.io/formiojs/formio.full.min.js

6. 示例应用

官方示例应用可参考：
https://formio.github.io/uswds

镜像拉取方式

您可以使用以下命令拉取该镜像。请将 <标签> 替换为具体的标签版本。如需查看所有可用标签版本，请访问标签列表页面。

轩辕镜像加速拉取命令点我查看更多 uswds-viewer 镜像标签

docker pull docker.xuanyuan.run/formio/uswds-viewer:<标签>

使用方法：

DockerHub 原生拉取命令

docker pull formio/uswds-viewer:<标签>

轩辕镜像配置手册

探索更多轩辕镜像的使用方法，找到最适合您系统的配置方式

Docker 配置

登录仓库拉取

通过 Docker 登录认证访问私有仓库

专属域名拉取

无需登录使用专属域名

K8s Containerd

Kubernetes 集群配置 Containerd

K3s

K3s 轻量级 Kubernetes 镜像加速

Dev Containers

VS Code Dev Containers 配置

Podman

Podman 容器引擎配置

Singularity/Apptainer

HPC 科学计算容器配置

其他仓库配置

ghcr、Quay、nvcr 等镜像仓库

Harbor 镜像源配置

Harbor Proxy Repository 对接专属域名

Portainer 镜像源配置

Portainer Registries 加速拉取

Nexus 镜像源配置

Nexus3 Docker Proxy 内网缓存

系统配置

Linux

在 Linux 系统配置镜像服务

Windows/Mac

在 Docker Desktop 配置镜像

MacOS OrbStack

MacOS OrbStack 容器配置

Docker Compose

Docker Compose 项目配置

NAS 设备

群晖

Synology 群晖 NAS 配置

飞牛

飞牛 fnOS 系统配置镜像

绿联

绿联 NAS 系统配置镜像

威联通

QNAP 威联通 NAS 配置

极空间

极空间 NAS 系统配置服务

网络设备

爱快路由

爱快 iKuai 路由系统配置

宝塔面板

在宝塔面板一键配置镜像

需要其他帮助？请查看我们的常见问题Docker 镜像访问常见问题解答或提交工单

镜像拉取常见问题

使用与功能问题

配置了专属域名后，docker search 为什么会报错？

docker search 限制

Docker Hub 上有的镜像，为什么在轩辕镜像网站搜不到？

站内搜不到镜像

机器不能直连外网时，怎么用 docker save / load 迁镜像？

离线 save/load

docker pull 拉插件报错（plugin v1+json）怎么办？

插件要用 plugin install

WSL 里 Docker 拉镜像特别慢，怎么排查和优化？

WSL 拉取慢

轩辕镜像安全吗？如何用 digest 校验镜像没被篡改？

安全与 digest

第一次用轩辕镜像拉 Docker 镜像，要怎么登录和配置？

新手拉取配置

轩辕镜像合规吗？轩辕镜像的合规是怎么做的？

镜像合规机制

错误码与失败问题

docker pull 提示 manifest unknown 怎么办？

manifest unknown

docker pull 提示 no matching manifest 怎么办？

no matching manifest（架构）

镜像已拉取完成，却提示 invalid tar header 或 failed to register layer 怎么办？

invalid tar header（解压）

Docker pull 时 HTTPS / TLS 证书验证失败怎么办？

TLS 证书失败

Docker pull 时 DNS 解析超时或连不上仓库怎么办？

DNS 超时

docker 无法连接轩辕镜像域名怎么办？

域名连通性排查

Docker 拉取出现 410 Gone 怎么办？

410 Gone 排查

出现 402 或「流量用尽」提示怎么办？

402 与流量用尽

Docker 拉取提示 UNAUTHORIZED（401）怎么办？

401 认证失败

遇到 429 Too Many Requests（请求太频繁）怎么办？

429 限流

docker login 提示 Cannot autolaunch D-Bus，还算登录成功吗？

D-Bus 凭证提示

为什么会出现「单层超过 20GB」或 413，无法加速拉取？

413 与超大单层

账号 / 计费 / 权限

轩辕镜像免费版和专业版有什么区别？

免费版与专业版区别

轩辕镜像支持哪些 Docker 镜像仓库？

支持的镜像仓库

镜像拉取失败还会不会扣流量？

失败是否计费

麒麟 V10 / 统信 UOS 提示 KYSEC 权限不够怎么办？

KYSEC 拦截脚本

如何在轩辕镜像申请开具发票？

申请开票

怎么修改轩辕镜像的网站登录和仓库登录密码？

修改登录密码

如何注销轩辕镜像账户？要注意什么？

注销账户

配置与原理类

写了 registry-mirrors，为什么还是走官方或仍然报错？

mirrors 不生效

怎么用 docker tag 去掉镜像名里的轩辕域名前缀？

去掉域名前缀

如何拉取指定 CPU 架构的镜像（如 ARM64、AMD64）？

指定架构拉取

用轩辕镜像拉镜像时快时慢，常见原因有哪些？

拉取速度原因

查看全部问题→

用户好评

来自真实用户的反馈，见证轩辕镜像的优质服务

oldzhang

运维工程师

Linux服务器

"Docker访问体验非常流畅，大镜像也能快速完成下载。"

热门搜索:

formio/uswds-viewer

formio

USWDS查看器，用于Form.io PDF服务器。

1 次收藏下载次数: 0状态：社区镜像维护者：formio仓库类型：镜像最近更新：1 个月前

镜像标签列表与下载命令

Form.io 美国Web设计系统(USWDS)模板

1. 镜像概述与主要用途

2. 核心功能与特性

USWDS框架兼容：表单渲染输出完全符合美国Web设计系统的界面规范
无缝集成formio.js：作为formio.js插件运行，无需修改核心库代码
双模式支持：同时提供表单渲染器和表单构建器功能
资源依赖管理：明确整合USWDS和formiojs的官方资源，确保样式一致性
多集成方式：支持JavaScript模块导入和HTML页面直接嵌入两种使用模式

3. 使用场景与适用范围

美国联邦***及相关机构的Web应用开发
需要符合USWDS设计标准的Form.io表单应用
***数字化服务平台中的表单系统构建
要求满足联邦无障碍标准(Section 508)的Web表单项目
Form.io PDF服务器的前端展示层，需符合***设计规范的场景

4. 使用方法与配置说明

4.1 基本使用方式

4.1.1 JavaScript模块导入

适用于现代前端工程化项目：

javascript
import uswds from '@formio/uswds';
import { Formio } from 'formiojs';

// 注册USWDS模板插件
Formio.use(uswds);

// 后续可通过Formio.createForm()渲染表单

4.1.2 HTML页面直接嵌入

适用于传统静态页面集成：

html
<html>
    <head>
        <!-- USWDS核心样式 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css">
        <!-- formiojs完整样式 -->
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <!-- USWDS模板样式 -->
        <link rel="stylesheet" href="dist/uswds.css">
        
        <!-- USWDS核心脚本 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <!-- formiojs完整脚本 -->
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <!-- USWDS模板脚本 -->
        <script src="dist/uswds.js"></script>
    </head>
    <body>
        <!-- 表单容器 -->
        <div id="formio"></div>
        
        <script type="text/javascript">
            // 应用USWDS模板
            Formio.use(uswds);
            // 从Form.io项目加载并渲染表单
            Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example');
        </script>
    </body>
</html>

4.2 表单构建器集成

可在应用中嵌入USWDS风格的Form.io表单构建器：

html
<html>
    <head>
        <!-- 引入与表单渲染相同的依赖资源 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css">
        <link rel="stylesheet" href="https://cdn.form.io/formiojs/formio.full.min.css">
        <link rel="stylesheet" href="dist/uswds.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/js/uswds.min.js"></script>
        <script src="https://cdn.form.io/formiojs/formio.full.min.js"></script>
        <script src="dist/uswds.js"></script>
    </head>
    <body>
        <!-- 构建器容器 -->
        <div id="builder"></div>
        
        <script type="text/javascript">
            Formio.use(uswds);
            // 初始化表单构建器
            Formio.builder(document.getElementById('builder'));
        </script>
    </body>
</html>

4.3 配置说明

4.3.1 依赖资源要求

USWDS资源：建议使用2.6.0版本以确保兼容性，可替换为其他兼容版本
formiojs资源：必须使用完整版(formio.full.min.js)以获得完整功能支持
模板资源：uswds.css和uswds.js需与应用代码一同部署

4.3.2 资源路径配置

外部CDN资源：可根据网络环境替换为国内镜像或私有CDN
本地资源部署：模板文件(uswds.css/uswds.js)建议放置在应用的dist目录下

5. Docker部署方案示例

5.1 Dockerfile

基于Node.js环境构建的示例：

dockerfile
FROM node:18-alpine AS builder

WORKDIR /app
COPY package*.json ./
RUN npm install @formio/uswds formiojs

# 构建应用(假设使用webpack等构建工具)
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

5.2 docker-compose配置

yaml
version: '3.8'

services:
  uswds-form-app:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./dist:/usr/share/nginx/html
    environment:
      - USWDS_CSS_URL=https://cdnjs.cloudflare.com/ajax/libs/uswds/2.6.0/css/uswds.min.css
      - FORMIO_JS_URL=https://cdn.form.io/formiojs/formio.full.min.js

6. 示例应用

官方示例应用可参考：
https://formio.github.io/uswds

镜像拉取方式

您可以使用以下命令拉取该镜像。请将 <标签> 替换为具体的标签版本。如需查看所有可用标签版本，请访问标签列表页面。

轩辕镜像加速拉取命令点我查看更多 uswds-viewer 镜像标签

docker pull docker.xuanyuan.run/formio/uswds-viewer:<标签>

使用方法：

DockerHub 原生拉取命令

docker pull formio/uswds-viewer:<标签>

轩辕镜像配置手册

探索更多轩辕镜像的使用方法，找到最适合您系统的配置方式

Docker 配置

登录仓库拉取

通过 Docker 登录认证访问私有仓库

专属域名拉取

无需登录使用专属域名

K8s Containerd

Kubernetes 集群配置 Containerd

K3s

K3s 轻量级 Kubernetes 镜像加速

Dev Containers

VS Code Dev Containers 配置

Podman

Podman 容器引擎配置

Singularity/Apptainer

HPC 科学计算容器配置

其他仓库配置

ghcr、Quay、nvcr 等镜像仓库

Harbor 镜像源配置

Harbor Proxy Repository 对接专属域名

Portainer 镜像源配置

Portainer Registries 加速拉取

Nexus 镜像源配置

Nexus3 Docker Proxy 内网缓存

系统配置

Linux

在 Linux 系统配置镜像服务

Windows/Mac

在 Docker Desktop 配置镜像

MacOS OrbStack

MacOS OrbStack 容器配置

Docker Compose

Docker Compose 项目配置

NAS 设备

群晖

Synology 群晖 NAS 配置

飞牛

飞牛 fnOS 系统配置镜像

绿联

绿联 NAS 系统配置镜像

威联通

QNAP 威联通 NAS 配置

极空间

极空间 NAS 系统配置服务

网络设备

爱快路由

爱快 iKuai 路由系统配置

宝塔面板

在宝塔面板一键配置镜像

需要其他帮助？请查看我们的常见问题Docker 镜像访问常见问题解答或提交工单

镜像拉取常见问题

使用与功能问题

配置了专属域名后，docker search 为什么会报错？

docker search 限制

Docker Hub 上有的镜像，为什么在轩辕镜像网站搜不到？

站内搜不到镜像

机器不能直连外网时，怎么用 docker save / load 迁镜像？

离线 save/load

docker pull 拉插件报错（plugin v1+json）怎么办？

插件要用 plugin install

WSL 里 Docker 拉镜像特别慢，怎么排查和优化？

WSL 拉取慢

轩辕镜像安全吗？如何用 digest 校验镜像没被篡改？

安全与 digest

第一次用轩辕镜像拉 Docker 镜像，要怎么登录和配置？

新手拉取配置

轩辕镜像合规吗？轩辕镜像的合规是怎么做的？

镜像合规机制

错误码与失败问题

docker pull 提示 manifest unknown 怎么办？

manifest unknown

docker pull 提示 no matching manifest 怎么办？

no matching manifest（架构）

镜像已拉取完成，却提示 invalid tar header 或 failed to register layer 怎么办？

invalid tar header（解压）

Docker pull 时 HTTPS / TLS 证书验证失败怎么办？

TLS 证书失败

Docker pull 时 DNS 解析超时或连不上仓库怎么办？

DNS 超时

docker 无法连接轩辕镜像域名怎么办？

域名连通性排查

Docker 拉取出现 410 Gone 怎么办？

410 Gone 排查

出现 402 或「流量用尽」提示怎么办？

402 与流量用尽

Docker 拉取提示 UNAUTHORIZED（401）怎么办？

401 认证失败

遇到 429 Too Many Requests（请求太频繁）怎么办？

429 限流

docker login 提示 Cannot autolaunch D-Bus，还算登录成功吗？

D-Bus 凭证提示

为什么会出现「单层超过 20GB」或 413，无法加速拉取？

413 与超大单层

账号 / 计费 / 权限

轩辕镜像免费版和专业版有什么区别？

免费版与专业版区别

轩辕镜像支持哪些 Docker 镜像仓库？

支持的镜像仓库

镜像拉取失败还会不会扣流量？

失败是否计费

麒麟 V10 / 统信 UOS 提示 KYSEC 权限不够怎么办？

KYSEC 拦截脚本

如何在轩辕镜像申请开具发票？

申请开票

怎么修改轩辕镜像的网站登录和仓库登录密码？

修改登录密码

如何注销轩辕镜像账户？要注意什么？

注销账户

配置与原理类

写了 registry-mirrors，为什么还是走官方或仍然报错？

mirrors 不生效

怎么用 docker tag 去掉镜像名里的轩辕域名前缀？

去掉域名前缀

如何拉取指定 CPU 架构的镜像（如 ARM64、AMD64）？

指定架构拉取

用轩辕镜像拉镜像时快时慢，常见原因有哪些？

拉取速度原因

查看全部问题→

用户好评

来自真实用户的反馈，见证轩辕镜像的优质服务

oldzhang

运维工程师

Linux服务器

"Docker访问体验非常流畅，大镜像也能快速完成下载。"

formio/uswds-viewer

USWDS查看器，用于Form.io PDF服务器。

Form.io 美国Web设计系统(USWDS)模板

1. 镜像概述与主要用途

2. 核心功能与特性

3. 使用场景与适用范围

4. 使用方法与配置说明

4.1 基本使用方式

4.2 表单构建器集成

4.3 配置说明

5. Docker部署方案示例

5.1 Dockerfile

5.2 docker-compose配置

6. 示例应用

镜像拉取方式

轩辕镜像加速拉取命令点我查看更多 uswds-viewer 镜像标签

DockerHub 原生拉取命令

更多 uswds-viewer 镜像推荐

syncfusion/pdfviewer-server

dtcenter/metviewer

biocontainers/orthanc-webviewer

siscc/dotstatsuite-data-viewer

intel/reconfigurable-ri-viewer

apache/incubator-kie-dashbuilder-viewer

查看更多 uswds-viewer 相关镜像

轩辕镜像配置手册

Docker 配置

登录仓库拉取

专属域名拉取

K8s Containerd

K3s

Dev Containers

Podman

Singularity/Apptainer

其他仓库配置

Harbor 镜像源配置

Portainer 镜像源配置

Nexus 镜像源配置

系统配置

Linux

Windows/Mac

MacOS OrbStack

Docker Compose

NAS 设备

群晖

飞牛

绿联

威联通

极空间

网络设备

爱快路由

宝塔面板

镜像拉取常见问题

使用与功能问题

配置了专属域名后，docker search 为什么会报错？

Docker Hub 上有的镜像，为什么在轩辕镜像网站搜不到？

机器不能直连外网时，怎么用 docker save / load 迁镜像？

docker pull 拉插件报错（plugin v1+json）怎么办？

WSL 里 Docker 拉镜像特别慢，怎么排查和优化？

轩辕镜像安全吗？如何用 digest 校验镜像没被篡改？

第一次用轩辕镜像拉 Docker 镜像，要怎么登录和配置？

轩辕镜像合规吗？轩辕镜像的合规是怎么做的？

错误码与失败问题

docker pull 提示 manifest unknown 怎么办？

docker pull 提示 no matching manifest 怎么办？

镜像已拉取完成，却提示 invalid tar header 或 failed to register layer 怎么办？

Docker pull 时 HTTPS / TLS 证书验证失败怎么办？

Docker pull 时 DNS 解析超时或连不上仓库怎么办？

docker 无法连接轩辕镜像域名怎么办？

Docker 拉取出现 410 Gone 怎么办？

出现 402 或「流量用尽」提示怎么办？

Docker 拉取提示 UNAUTHORIZED（401）怎么办？

遇到 429 Too Many Requests（请求太频繁）怎么办？

docker login 提示 Cannot autolaunch D-Bus，还算登录成功吗？

为什么会出现「单层超过 20GB」或 413，无法加速拉取？

账号 / 计费 / 权限

轩辕镜像免费版和专业版有什么区别？

轩辕镜像支持哪些 Docker 镜像仓库？

镜像拉取失败还会不会扣流量？

麒麟 V10 / 统信 UOS 提示 KYSEC 权限不够怎么办？