如何在angular中创建用于从forge viewer下载数据到CSV格式的按钮

Question

我使用ng2-adsk-forge-viewer (https://github.com/theNBS/ng2-adsk-forge-viewer)为查看器添加扩展。我想通过svf进行解析获取所有具有属性的元素并将其作为CSV文件获取。我用angular作为前端。只是想创建按钮，可以下载数据查看器，并给他们回到csv格式的后端。下面你可以看到扩展。从ng-adsk-forge-viewer添加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);
}
}

Answer 1

正如你所看到的,扩展只是香草JavaScript类。他们可以用在观众无论是否使用反应,角,或任何其他UI框架。

现在，如果你需要获取设计中所有元素的所有属性，有几种方法可以做到:

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