כיצד להשתמש ב-Aspose.CAD ב-Vue

דרישות קודמות

Vue CLI
Visual Code
Node.js

המרת תמונת dgn ל-png והצגתה בדפדפן

בדוגמה זו, תיצור תוכנית המרה פשוטה שממירה שרטוט ושומרת אותו כתמונה.

יצירת פרויקט Vue

ודא שאינך כבר במדריך עבודה של Vue.
התחל חדש ואז את שם התוכנית או השתמש בתוכניות אחרות כדי ליצור פרויקט כמו Visual Code או WebStorm:
```
vue create vue-example
```
התקן את Aspose.CAD מחבילת npm
```
npm install aspose-cad
```
צור תגי קלט מסוג קובץ ותג img כדי לטעון ולהציג את השרטוט
```
<input id="file" type="file">
<img id="image" />
```

ב-App.vue, אנו מתארים את התהליך של הפעלת תהליכים עזר, עיבוד והצגת התמונה

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

export default{
  beforeCreate: function () {
    //נדרש להתחלת תהליך ההרכבה
    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...");
      await dotnet.boot();
      console.log("WASM נטען");

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

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

              // טען
              let file = Image.load(array);
              console.log(file);

              // שמור
              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" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <p>דוגמה ל-aspose.cad עבור 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>

הפעל את היישום
```
npm run dev
```

דוגמת ביצוע

בחר קובץ.
בחר כל קובץ DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG.
אם התשובה היא מוצלחת, הקובץ יוצג על המסך ויוצע להוריד אותו.

ראה גם

כיצד להשתמש בAspose.CAD בTypeScript