开放平台

电子签章

# 该示例主要演示电子签章功能。

附件 1：电子签章标准图框制作流程 附件 2：用例签章图及证书文件（密钥：123456）

Demo 操作流程：

1.下载附件 2 中的测试用例文件

2.点击界面右侧的“电子签章演示”按钮

3.填入机打信息、签章图、证书、密钥等，并点击确定

4.若要查看 pdf 效果，点击界面中的打印按钮，并勾选“携带电子签名签章”选项，并打印

PS：若要清空签入的数据，点击界面右侧的“电子签章演示”按钮并直接点击确定即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <base href="/pages/" />
    <title>Html Demo</title>
  </head>

  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>

  <script
    type="text/javascript"
    src="../assets/ZwCloud2DSDK/ZwCloud2D.js"
  ></script>

  <body id="wholeFrame">
    <div id="container" style="width: 100vw; height: 100vh"></div>

    <script type="module">
      // 初始化配置
      const initializeViewer = async () => {
        try {
          // 设置云服务连接配置
          window.ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
            process.env.HTML_APP_ZW_URL
          );
          // 设置认证令牌
          window.ZwCloud2D.ZwDataProcessor.ZwSetToken(
            process.env.HTML_APP_ZW_TOKEN
          );
          // 初始化编辑器
          await window.ZwCloud2D.ZwEditor.ZwInit(
            document.getElementById("container")
          );
        } catch (error) {
          console.error("初始化失败:", error);
          // 可以添加错误处理逻辑
        }
      };

      initializeViewer().then(() => {
        // 从路由参数获取文档ID
        const params = new URLSearchParams(location.search);
        const docId = params.get("docId");

        if (docId) {
          // 配置要加载的文档
          window.ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);

          // 加载文档
          window.ZwCloud2D.ZwDataProcessor.ZwLoad();
        }

        // 开放签章相关功能
        window.ZwCloud2D.ZwEditor.ZwSetUserOptions({
          panel: { signPanel: true },
          commandButton: { Sign: true },
        });
      });
    </script>
  </body>
</html>