How to create button for downloading data from forge viewer to CSV format in angular

Question

I have used ng2-adsk-forge-viewer (https://github.com/theNBS/ng2-adsk-forge-viewer) for adding extensions to the viewer. I want to do Parsing through svf get all elements with properties and just get them as a CSV. I am using angular as the front-end. Just want to create button which can download data viewer and give them back to backend in csv format. Below you can see the extension.ts file added from ng-adsk-forge-viewer.

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);
  }
}

Answer 1

As you can see, the extensions are just vanilla JavaScript classes. They can be used in the viewer no matter whether it's using React, Angular, or any other UI framework.

Now, if you need to get all properties of all elements in your design, there are a couple of ways to do that:

• From the server side, using the Model Derivative endpoint https://forge.autodesk.com/en/docs/model-derivative/v2/reference/http/urn-metadata-guid-properties-GET; this returns a JSON with all the properties, and if needed, you could transform this output into a CSV
• From the client side, ideally using the executeUserFunction to execute your custom query all inside a web worker; and there are many different articles online on downloading some structured data as a CSV, for example: https://yourblogcoach.com/export-html-table-to-csv-using-javascript/