Jak używać Aspose.CAD w Vue

Wymagania wstępne

Vue CLI
Visual Code
Node.js

Konwersja obrazu dgn do png i wyświetlenie w przeglądarce

W tym przykładzie tworzysz prosty program konwersji, który konwertuje rysunek i zapisuje go jako obraz.

Tworzenie projektu Vue

Upewnij się, że nie jesteś już w katalogu roboczym Vue.
Rozpocznij nowy i następnie nazwę programu lub użyj innych programów, aby utworzyć projekt, takich jak Visual Code lub WebStorm:
```
vue create vue-example
```
Zainstaluj Aspose.CAD z pakietu npm
```
npm install aspose-cad
```
Utwórz tagi typu plik i img, aby załadować i wyświetlić rysunek
```
<input id="file" type="file">
<img id="image" />
```

W App.vue opisujemy proces uruchamiania pomocniczych procesów, przetwarzania i wyświetlania obrazu

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

export default {
  beforeCreate: function () {
    // potrzebne do uruchomienia procesu kompilacji
    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("ładowanie WASM...");
      await dotnet.boot();
      console.log("załadowano WASM");

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

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

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

              // ZAPISZ
              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="Logo Vue" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <p>Przykład aspose.cad dla 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>

Uruchom aplikację
```
npm run dev
```

Przykład wykonania

Wybierz plik.
Wybierz dowolny plik DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG.
Jeśli odpowiedź jest pozytywna, plik zostanie wyświetlony na ekranie i zostanie zaoferowane jego pobranie.

Zobacz także

Jak używać Aspose.CAD w TypeScript