Download Export with Viewer API v3

Grasshopper ShapeDiver
,
1

I am trying to use the Download Export functionality in Shapediver with the Viewer API v3. I have 3 different downloads set up in Grasshopper - for stl, dxf and 3dm.

I managed to do it back with the v2 of the API, but I simply cannot find a concrete example how to do it with v3.

This was my v2 code:

function exportFile(format: string) {
  const exportApi = api.exports.find((exportItem) => exportItem.name === format);
  if (exportApi) {
    exportApi.request().then((response) => {
      const link = response.content[0].href;
      console.log("Use this link to download the file: " + link);
      window.location.href = link;
    });
  }
}

The only snippet of documentation on this I could find comes from this migration guide: https://help.shapediver.com/doc/migration-guide#Viewer2-MigrationGuide-Exports but changing only the line it says in the migration guide does not work.

There is a page for the IExportApi here: IExportApi | Viewer but once again I’m not sure who this documentation is for. It’s definitely not relevant for actually learning how to do things with the API. I guess there is a difference between a documentation of the API and documentation of how to use the API. The first simply shows what’s there, but the second shows context and examples. I have taken part in many courses around Grasshopper and Coding and there all you do is go through examples. That’s how you learn to use something. Just showing what each part is and how each individual part works will not really teach you much.

Maybe that is something to consider for the documentation. A very good example of this is W3School. For example: JavaScript String Search. They document everything around CSS, HTML, JS and more and each page has at least 1 example, usually several.

Anyways, can you provide a code example how to request a file download using Viewer V3?

2

This is the API reference documentation for developers. On this page you will find a function called request.

There are lots of examples here.

3

Ahhh. I see. I could not find that section, because it was in “Session”, which I did not know is where it is. In the search results it’s actually only in the 9th position:

image
image1360×1819 202 KB

I will take a look there. Thanks!

4

So I think I finally pieced it together from the examples (non of which used a button to download a file) and with some help from ChatGPT.

The TypeScript code is:

// Download a file from a button

  // read out the export objects with the specific names
  const stlExport = session.getExportByName("download-stl")[0];

  // get the download buttons elements
  const stlButton = document.getElementById("download-stl");

  // function to handle export download
  async function handleExportDownload(exportObject: any) {
    // request the export
    const response = await exportObject.request();

    // get the download URL from the response
    const downloadUrl = response.content[0].href;

    // create a link element
    const link = document.createElement("a");
    link.href = downloadUrl;
    link.download = response.filename || "exportedFile";

    // simulate a click on the link to start the download
    link.click();
  }

  // add click event listeners to the download buttons
  stlButton.addEventListener("click", async () => {
    await handleExportDownload(stlExport);
  });

My export in Grasshopper is called “download-stl”.

The id of the div around the link is also “download-stl”.

Not quite the one-liner like just having it download when it loads the viewer, which I cannot think of many use-cases for that.

The other examples where for requesting an Export with File Parameters and the other was for exporting using authentication tokens, which is nice, but very specific.

All 3 examples either just log the export to the console or download it straight away upon loading.