איך להשתמש ב-Aspose.CAD ב-React

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

• Visual Code
• Node.js

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

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

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

1. ודא שאתה לא כבר בתיקיית עבודה של React.
2. התחל אחת חדשה ולאחר מכן את שם התוכנית או השתמש בתוכניות אחרות ליצירת פרויקט כמו Visual Code או WebStorm:

   npx create-react-app react-example

3. התקן את Aspose.CAD מחבילת npm

   npm install aspose-cad

4. צור תגי קובץ קלט ותמונה כדי לטעון ולהציג את הציור

   <span style="background-color: red">
     <input id="file" type="file"/>
     <img alt="המומר" id="image" />
   </span>

5. ב-App.tsx, אנו מתארים את תהליך התחלת תהליכי עזר, עיבוד ושמירת התמונה

   import React from 'react';
   import './App.css';
   import {boot} from "aspose-cad/dotnet";
   import {Image, PngOptions} from "aspose-cad";
   function App() {
     return (
       <div className="App">
         <header className="App-header">
             <input id="file" type="file"/>
             <img alt="המומר" id="image" />
         </header>
       </div>
     );
   }
   
   window.onload = async function () {
     console.log("טוען WASM...");
     await boot();
     console.log("נשאר WASM");
   
     // @ts-ignore
       document.querySelector('input').addEventListener('change', function() {
           var reader = new FileReader();
           reader.onload = function() {
   
             var arrayBuffer = this.result;
             // @ts-ignore
             var array = new Uint8Array(arrayBuffer);
   
             // טען
             var file = Image.load(array);
   
             // שמור
             var exportedFilePromise = Image.save(array, new PngOptions());
             exportedFilePromise.then((exportedFile: BlobPart) => {
               console.log(exportedFile);
   
               var urlCreator = window.URL || window.webkitURL;
               var blob = new Blob([exportedFile], { type: 'application/octet-stream' });
               var imageUrl = urlCreator.createObjectURL(blob);
               // @ts-ignore
               document.querySelector("#image").src = imageUrl;
             });
           }
           // @ts-ignore
           reader.readAsArrayBuffer(this.files[0]);
         },
         false);
   };
   export default App;

6. הפעל את היישום

   npm start

דוגמת ביצוע

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

ראה גם

• התקן את Visual Code
• התקן את Node.js