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

Posted 2023-03-16

【中文标题】如何创建用于将数据从伪造查看器下载为 CSV 格式的按钮

【英文标题】：How to create button for downloading data from forge viewer to CSV format in angular

【发布时间】：2021-11-24 18:00:08

【问题描述】：

我使用 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);
  

【参考方案1】：

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

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

从服务器端，使用 Model Derivative 端点 https://forge.autodesk.com/en/docs/model-derivative/v2/reference/http/urn-metadata-guid-properties-GET; 这将返回一个包含所有属性的 JSON，如果需要，您可以将此输出转换为 CSV 从客户端，理想情况下使用executeUserFunction 在网络工作者内部执行您的自定义查询；网上有很多不同的文章将一些结构化数据下载为 CSV，例如：https://yourblogcoach.com/export-html-table-to-csv-using-javascript/

【讨论】：

感谢您的回复！为此，我使用了 (***.com/questions/51487689/…)。 ` public getElementData() var allDbIds: number[] = this.getAlldbIds(); this.viewer.model.getBulkProperties(allDbIds, null, (result) => this.downloadFile(result)); ` 但是如何渲染对象以保存 csv -4269) [..., ..., ..., ..., ..., ..., ..., ..., ... 、…、…、…、…、…、…、…、] [0 … 99] [100 … 199] [200 … 299] 等..

我希望 objectid 的 displayName 作为 csv 文件的列名。

嗯，你可以只map列表中的每一项到一个行字符串，然后join所有行使用换行符。