Jak používat Aspose.CAD ve Vue

Předpoklady

Vue CLI
Visual Studio Code
Node.js

Převod obrázku ve formátu DGN na PNG a zobrazení v prohlížeči

V tomto příkladu vytvoříte jednoduchý konverzní program, který převede výkres a uloží ho jako obrázek.

Vytvoření Vue projektu

Ujistěte se, že se nenacházíte již v pracovním adresáři Vue.
Spusťte nový a poté pojmenujte program nebo použijte jiné programy k vytvoření projektu, jako je Visual Studio Code nebo WebStorm:
```
vue create vue-example
```
Nainstalujte Aspose.CAD pomocí npm balíčku
```
npm install aspose-cad
```
Vytvořte vstupní typ souboru a značky img pro načtení a zobrazení výkresu
```
<input id="file" type="file">
<img id="image" />
```

V souboru App.vue popíšeme proces spouštění pomocných procesů, zpracování a zobrazení obrázku

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

export default{
  beforeCreate: function () {
    //potřeba pro spuštění procesu sestavení
    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("načítání WASM...");
      await dotnet.boot();
      console.log("WASM načten");

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

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

              // NAHRÁT
              let file = Image.load(array);
              console.log(file);

              // ULOŽIT
              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>Příklad aspose.cad pro 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>

Spusťte aplikaci
```
npm run dev
```

Příklad spuštění

Vyberte soubor.
Vyberte jakýkoliv soubor ve formátech DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG.
Pokud je odpověď úspěšná, soubor bude zobrazen na obrazovce a nabídne možnost jej stáhnout.

Viz také

Jak používat Aspose.CAD v TypeScriptu