时间戳

首页 > 解决方案 > 如何创建用于将数据从伪造查看器下载为 CSV 格式的按钮

angular - 如何创建用于将数据从伪造查看器下载为 CSV 格式的按钮

问题描述

我使用 ng2-adsk-forge-viewer ( https://github.com/theNBS/ng2-adsk-forge-viewer ) 为查看器添加扩展。我想通过 svf 进行解析，获取所有具有属性的元素，然后将它们作为 CSV 获取。我使用 angular 作为前端。只想创建可以下载数据查看器并将它们以 csv 格式返回到后端的按钮。您可以在下面看到从 ng-adsk-forge-viewer 添加的 extension.ts 文件。

import { Extension } from 'ng2-adsk-forge-viewer';

declare const THREE: any;

export class ForgeExtension extends Extension {
  // Extension must have a name
  public static extensionName: string = 'ForgeExtension';

  // Toolbar test
  private subToolbar: Autodesk.Viewing.UI.ToolBar;
  private onToolbarCreatedBinded: any;

  public activate() {
    return true;
  }

  public deactivate() {
    return true;
  }

  public load() {
    // Called when Forge Viewer loads your extension
    console.log('ForgeExtension loaded!');

    this.viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, (e) => {
      if (e.dbIdArray.length) {
        const dbId = e.dbIdArray[0];
        this.viewer.setThemingColor(dbId, new THREE.Vector4(0, 1, 1, 1));
      }
    });

    // Initialise a toolbar
    if (this.viewer.toolbar) {
      // Toolbar is already available, create the UI
      //this.createUI();
    } else {
      // Toolbar hasn't been created yet, wait until we get notification of its creation
      this.onToolbarCreatedBinded = this.onToolbarCreated.bind(this);
      this.viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    }

    // Must return true or extension will fail to load
    return true;
  }

  public unload() {
    if (this.subToolbar) {
      this.viewer.toolbar.removeControl(this.subToolbar);
      this.subToolbar = null;
    }

    // Called when Forge Viewer unloads your extension
    console.log('ForgeExtension unloaded.');
    // Must return true or extension will fail to unload
    return true;
  }

  public onToolbarCreated() {
    this.viewer.removeEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, this.onToolbarCreatedBinded);
    this.onToolbarCreatedBinded = null;
    //this.createUI();
  }

  private createUI() {
    // Button 1
    const button1 = new Autodesk.Viewing.UI.Button('my-view-front-button');
    button1.onClick = e => this.setViewCube('front');
    button1.addClass('my-view-front-button');
    button1.setToolTip('View front');

    // Button 2
    const button2 = new Autodesk.Viewing.UI.Button('my-view-back-button');
    button2.onClick = e => this.setViewCube('back');
    button2.addClass('my-view-back-button');
    button2.setToolTip('View Back');

    // SubToolbar
    this.subToolbar = new Autodesk.Viewing.UI.ControlGroup('my-custom-view-toolbar');
    this.subToolbar.addControl(button1);
    this.subToolbar.addControl(button2);

    this.viewer.toolbar.addControl(this.subToolbar);
  }

  private setViewCube(orientation: 'front' | 'back') {
    const ext = (this.viewer.getExtension('Autodesk.ViewCubeUi') as any);
    ext.setViewCube(orientation);
  }
}

标签： angularautodesk-viewerautodeskautodesk-model-derivative

解决方案

如您所见，扩展只是普通的 JavaScript 类。无论是使用 React、Angular 还是任何其他 UI 框架，它们都可以在查看器中使用。

现在，如果您需要获取设计中所有元素的所有属性，有几种方法可以做到这一点：

推荐阅读