Wie man Aspose.CAD in React verwendet

Voraussetzungen

Visual Studio Code
Node.js

Konvertieren Sie eine DGN-Bilddatei in PNG und zeigen Sie sie im Browser an

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

Erstellen des React-Projekts

Stellen Sie sicher, dass Sie sich nicht bereits in einem React-Arbeitsbereisverzeichnis befinden.
Starten Sie ein neues und geben Sie dann den Namen des Programms ein oder verwenden Sie andere Programme wie Visual Studio Code oder WebStorm, um ein Projekt zu erstellen:
```
npx create-react-app react-example
```
Installieren Sie Aspose.CAD aus dem npm-Paket
```
npm install aspose-cad
```

Erstellen Sie einen Eingabetyp-Datei und img-Tags, um die Zeichnung zu laden und anzuzeigen

<span style="background-color: red">
  <input id="file" type="file"/>
  <img alt="converted" id="image" />
</span>

In App.tsx beschreiben wir den Prozess des Startens der Hilfsprozesse, des Verarbeitens und Speicherns des Bildes

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="converted" id="image" />
      </header>
    </div>
  );
}

window.onload = async function () {
  console.log("Lade WASM...");
  await boot();
  console.log("WASM geladen");

  // @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);

          // Laden
          var file = Image.load(array);

          // Speichern
          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;

Starten der Anwendung
```
npm start
```

Ausführungsbeispiel

Datei auswählen.
Wählen Sie eine 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