Wie man Aspose.CAD in Vue verwendet

Voraussetzungen

Vue CLI
Visual Studio Code
Node.js

Umwandeln eines DGN-Bildes in PNG und Anzeigen im Browser

In diesem Beispiel erstellen Sie ein einfaches Konvertierungsprogramm, das eine Zeichnung umwandelt und als Bild speichert.

Erstellen des Vue-Projekts

Stellen Sie sicher, dass Sie sich nicht bereits in einem Vue-Arbeitsbereisverzeichnis befinden.
Starten Sie ein neues und dann geben Sie den Namen des Programms ein oder verwenden Sie andere Programme wie Visual Studio Code oder WebStorm, um ein Projekt zu erstellen:
```
vue create vue-beispiel
```
Installieren Sie Aspose.CAD aus dem npm-Paket
```
npm install aspose-cad
```
Erstellen Sie einen Input-Typ Datei und img-Tags, um die Zeichnung zu laden und anzuzeigen
```
<input id="file" type="file">
<img id="image" />
```

In App.vue beschreiben wir den Prozess des Startens der Hilfsprozesse, der Verarbeitung und zeigen das Bild

<script>
import { Drawing, PngOptions } from "aspose-cad";

export default {
  beforeCreate: function () {
    // Notwendig für den Start des Zusammenbau-Prozesses
    let recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', '/node_modules/aspose-cad/dotnet.js')
    document.head.appendChild(recaptchaScript)

    let dotnet;
  },
  mounted() {
    window.addEventListener('load', this.onWindowLoad)
  },
  methods: {
    async onWindowLoad() {
      
      console.log("WASM wird geladen...");
      await dotnet.boot();
      console.log("WASM geladen");

      document.querySelector('input').addEventListener('change', function() {
            const reader = new FileReader();
            reader.onload = function() {

              let arrayBuffer = this.result;
              let array = new Uint8Array(arrayBuffer);

              // LADEN
              let file = Image.load(array);
              console.log(file);

              // SPEICHERN
              let exportedFilePromise = Image.save(array, new PngOptions());
              exportedFilePromise.then(exportedFile => {
                console.log(exportedFile);

                let urlCreator = window.URL || window.webkitURL;
                let blob = new Blob([exportedFile], { type: 'application/octet-stream' });
                let imageUrl = urlCreator.createObjectURL(blob);
                document.querySelector("#image").src = imageUrl;
              });
            }

            reader.readAsArrayBuffer(this.files[0]);
          },
          false);
    },
  },
}
</script>

<template>
  <header>
    <img alt="Vue Logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <p>Beispiel aspose.cad für Vue.</p>
  </header>

  <main>
    <input id="file" type="file">
    <br/>
    <img id="image" />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}
main{
  text-align: center;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }


  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

Anwendung starten
```
npm run dev
```

Ausführungsbeispiel

Datei auswählen.
Wählen Sie eine beliebige DXF-, DWG-, DGN-, DWF-, DWFX-, IFC-, STL-, DWT-, IGES-, PLT-, CF2-, OBJ-, HPGL-, IGS-, PCL-, FBX-, PDF-, SVG-Datei aus.
Wenn die Antwort erfolgreich ist, wird die Datei auf dem Bildschirm angezeigt und es wird angeboten, sie herunterzuladen.

Siehe auch

Wie man Aspose.CAD in TypeScript verwendet