How to use Aspose.CAD in React

Prerequisites

  • Visual Code
  • Node.js

Convert dgn image to png and display in browser

In this example, you create a simple conversion program that converts a drawing and saves it as an image.

Creating the React Project

  1. Ensure that you aren’t already in an React workspace directory.
  2. Start a new one and then the name of the program or use other programs to create a project such as Visual Code or WebStorm: 
    npx create-react-app react-example
  3. Install Aspose.CAD from npm package 
    npm install aspose-cad
  4. Create an input type file and img tags to load and display the drawing 
    <span style="background-color: red">
  <input id="file" type="file"/>
  <img alt="converted" id="image" />
</span>
  5. In App.tsx, we describe the process of starting the helper processes, processing and saving the image 
    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("loading WASM...");
  await boot();
  console.log("loaded 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);

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

          // SAVE
          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. Start application 
    npm start

Execution example

  1. Choose file.
    Choose file
  2. Select any DXF, DWG, DGN, DWF, DWFX, IFC, STL, DWT, IGES, PLT, CF2, OBJ, HPGL, IGS, PCL, FBX, PDF, SVG file.
  3. If the answer is successful, the file will be displayed on the screen and will offer to download it.
    Convert image

See Also

How to use Aspose.CAD in TypeScript