前端sdk引用问题

本部分内容主要包括引入前端 sdk 的 js 文件时常见的问题。结合客户的具体使用场景，前端 sdk 的使用可分为以下两个部分：1.非组件内使用；2.组件内使用；

以下是具体说明：

# 一、非组件内使用

如无特殊需求，建议在 index.html 中按如下顺序引入 sdk 文件，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

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

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

  <script>
    // 初始化配置
    const initializeViewer = async () => {
      try {
        // 设置云服务连接配置
        ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(process.env.HTML_APP_ZW_URL);

        // 设置认证令牌
        // 使用Cloud2D公网服务时,需要设置请求token
        // ZwCloud2D.ZwDataProcessor.ZwSetToken(process.env.HTML_APP_ZW_TOKEN);

        // 初始化编辑器
        await ZwCloud2D.ZwEditor.ZwInit(document.getElementById("container"));
      } catch (error) {
        console.error("初始化失败:", error);
        // 可以添加错误处理逻辑
      }
    };

    initializeViewer().then(() => {
      // 设置加载图纸的docId
      ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);
      // 加载文档
      ZwCloud2D.ZwDataProcessor.ZwLoad();
    });
  </script>
</body>

常见问题：

1.如遇编译报错类似 Module is not defined，Module、ZwCloud2D 均为挂载到 window 上的全局对象，在对应的对象前添加 window 即可解决，如 window.Module、window.Zwcloud2D 等；

2.如遇报错 unexpected token '<'，请检查 js 文件引用路径是否正确。如引用路径错误，对于请求会返回 index.html 中的内容，可据此判断；

# 二、组件内使用

通常情况下，我们推荐在 index.html 中引用 js 文件，在组件中执行初始化方法，如下所示，如需在 js 代码中动态引入 sdk，请直接查看本节第 4 部分内容

<body id="wholeFrame">
  <div id="app"></div>
  <script
    type="text/javascript"
    src="/assets/ZwCloud2DSDK/ZwCloud2D.js"
  ></script>
</body>

根据前端主流框架的划分，以下主要包括四部分内容：1.基于 vue 框架的使用说明；2.基于 angular 框架的使用说明；3.基于 react 框架的使用说明；4.补充说明。

# 1.基于 vue 框架的使用说明

vue 框架需要在 mouted 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

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

<script>
export default {
  name: "view",
  data() {
    return {};
  },
  props: {},
  components: {},
  created() {},
  mounted() {
    this.initializeViewer().then(() => {
      // 设置加载图纸的docId
      window.ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);

      // 加载文档
      window.ZwCloud2D.ZwDataProcessor.ZwLoad();
    });
  },
  methods: {
    // 初始化配置
    initializeViewer: async () => {
      try {
        // 设置云服务连接配置
        window.ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
          process.env.VUE_APP_ZW_URL
        );

        // 设置认证令牌
        // 使用Cloud2D公网服务时,需要设置请求token
        // window.ZwCloud2D.ZwDataProcessor.ZwSetToken(process.env.HTML_APP_ZW_TOKEN);

        // 初始化编辑器
        await window.ZwCloud2D.ZwEditor.ZwInit(
          document.getElementById("container")
        );
      } catch (error) {
        console.error("初始化失败:", error);
        // 可以添加错误处理逻辑
      }
    },
  },
};
</script>

# 2.基于 angular 框架的使用说明

angular 框架需要在 ngOnInit 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-dwg-editor",
  templateUrl: "./dwg-editor.component.html",
  styleUrls: ["./dwg-editor.component.scss"],
})
export class DwgEditorComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {
    this.initializeViewer().then(() => {
      // 设置加载图纸的docId
      window.ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);

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

  // 初始化配置
  initializeViewer () {
    try {
      // 设置云服务连接配置
      window.ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
        process.env.VUE_APP_ZW_URL
      );

      // 设置认证令牌
      // 使用Cloud2D公网服务时,需要设置请求token
      // window.ZwCloud2D.ZwDataProcessor.ZwSetToken(process.env.HTML_APP_ZW_TOKEN);

      // 初始化编辑器
      await window.ZwCloud2D.ZwEditor.ZwInit(
        document.getElementById("container")
      );
    } catch (error) {
      console.error("初始化失败:", error);
      // 可以添加错误处理逻辑
    }
  },
}

# 3.基于 react 框架的使用说明

react 框架需要在 componentDidMount 生命周期执行初始化方法，请确保 ZwInit 方法传入的 dom 元素是正确的（id 名或类名不作限制），此元素将作为 sdk 的容器。

import React, { useEffect, useRef } from "react";
import { useLocation } from "react-router-dom";

const View = () => {
  const containerRef = useRef(null);
  const location = useLocation();

  // 初始化配置
  const initializeViewer = async () => {
    try {
      // 设置云服务连接配置
      window.ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
        process.env.REACT_APP_ZW_URL
      );

      // 设置认证令牌
      // 使用Cloud2D公网服务时,需要设置请求token
      // window.ZwCloud2D.ZwDataProcessor.ZwSetToken(process.env.HTML_APP_ZW_TOKEN);

      // 初始化编辑器
      await window.ZwCloud2D.ZwEditor.ZwInit(containerRef.current);
    } catch (error) {
      console.error("初始化失败:", error);
      // 可以添加错误处理逻辑
    }
  };

  useEffect(() => {
    initializeViewer().then(() => {
      // 配置要加载的文档
      window.ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);

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

    // 清理函数（根据需要添加）
    return () => {
      // 如果需要清理资源，在此添加
    };
  }, [location.search]); // 依赖路由查询参数

  return (
    <div
      ref={containerRef}
      style={{
        width: "100vw",
        height: "100vh",
        position: "fixed",
        top: 0,
        left: 0,
      }}
    />
  );
};

export default View;

# 4.补充说明

本节内容适用于需在 js 代码中动态引入 sdk 的场景，在各个前端框架对应的生命周期时执行相关代码即可，如 vue 的 mouted、angular 的 ngOnInit 和 react 的 componentDidMount，注意，请务必按照如下所示的引用顺序，否则可能会引发某些时序问题。以下为基于 react 框架的例子。

import React from "react";
import PropTypes from "prop-types";
import "./Display.css";
export default class Display extends React.Component {
  static propTypes = {
    value: PropTypes.string,
  };

  render() {
    return <div id="container"></div>;
  }

  componentDidMount() {
    var oHead = document.getElementsByTagName("head")[0];

    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "/assets/ZwCloud2DSDK/ZwCloud2D.js";

    oHead.appendChild(oScript);

    // 初始化配置
    const initializeViewer = async () => {
      try {
        // 设置云服务连接配置
        window.ZwCloud2D.ZwDataProcessor.ZwSetConnectUrl(
          process.env.REACT_APP_ZW_URL
        );

        // 设置认证令牌
        // 使用Cloud2D公网服务时,需要设置请求token
        // window.ZwCloud2D.ZwDataProcessor.ZwSetToken(process.env.HTML_APP_ZW_TOKEN);

        // 初始化编辑器
        await window.ZwCloud2D.ZwEditor.ZwInit(containerRef.current);
      } catch (error) {
        console.error("初始化失败:", error);
        // 可以添加错误处理逻辑
      }
    };

    oScript.onload = () => {
      initializeViewer().then(() => {
        // 配置要加载的文档
        window.ZwCloud2D.ZwDataProcessor.ZwSetLoadDwg(docId);

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

IE浏览器兼容指南

中望云CAD开放平台