JavaScript Web Excel Editor

Powerful and perfect JS-based web Excel performance

SpreadJS: Designer Component

List of Services

    It provides the same UI/UX as the most user-friendly MS 365 Excel & Google Sheets.

    Easily implement Excel functions and screens in a web environment with just a few lines of code using SpreadJS Designer.

    It provides components for Excel functions, ranging from the screen structure, allowing for free customization and arbitrary expansion.

    The screen above is an actual screen implemented using the SpreadJS designer component.

    A SpreadJS developer license is required to use the designer component.

    Run Designer Component Demo How to apply

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    How to apply designer components

    Learn how to integrate designer components with a new spreadsheet.

    Step 1. Reference SpreadJS CSS and JS files to your project.

    <!--CSS file-->

    <link href= "css/gc.spread.sheets.excel2013white.0.0.0css" rel= "stylesheet" type= "text/css" />

    <!--script file-->

    <script type= "text/javascript" src= "scripts/gc.spread.sheets.all.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js" ></script>
    <script type=     "text/javascript" src= "scripts/plugins/gc.spread.sheets.print.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/plugins/gc.spread.sheets.io.0.0.0.min.js" ></script>

    <!--Culture settings-->

    <script type= "text/javascript" src= "scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js" ></script>  

    Step 2. Reference the CSS and JS files of the designer component in your project.

    <!--CSS file-->

    <link href=     "css/gc.spread.sheets.designer.0.0.0.min.css"   rel=   "stylesheet" type= "text/css" />

    <!--script file-->

    <script type= "text/javascript" src= "scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js" ></script>

    <script type= "text/javascript" src= "scripts/gc.spread.sheets.designer.all.0.0.0.min.js" ></script>

    Step 3: Include DOM elements as a container in the page body.

    <div id= "gc-designer-container" role="application" ></div>

    Step 4: Initialize the designer component. Before initializing, also set the license key for the designer component and SpreadJS.

    // Set license key

    GC.Spread.Sheets.LicenseKey = 'xxx';

    GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';


    var designer = new GC.Spread.Sheets.Designer.Designer(

    document.getElementById("gc-designer-container")

    );

    ✅ The complete HTML code is as follows:
    Include the content within the     <style> tags in the code.

    <!DOCTYPE html>

    <html lang="ko">


    <head>

        <meta charset="utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta name="spreadjs culture" content="ko-kr" />

        <title>spreadsheet designer</title>

        <!-- CSS file -->

        <link href= "css/gc.spread.sheets.excel2013white.0.0.0.css" rel= "stylesheet" type= "text/css" />

        <link href= "css/gc.spread.sheets.designer.0.0.0.min.css" rel= "stylesheet" type= "text/css" />

    </head>


    <style>

        .designer {

        height: calc(100% - 15px);

        }


            .ribbon-button-welcome {

            background-image: url('./welcome.png');

            background-size: 35px 35px;

        }


            html,

        body {

            overflow: hidden;

            padding: 0;

            margin: 0;

            height: 100%;

        }


            #gc-designer-container {

            height: 100%;

        }

    </style>


    <body unselectable="on">

        <!-- DOM element -->

        <div id="gc-designer-container" role="application"></div>


            <!-- script file -->

        <script type="text/javascript" src="scripts/gc.spread.sheets.all.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.shapes.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.charts.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.datacharts.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.slicers.0.0.0.min.js"></script>


            <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.print.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.barcode.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.pdf.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.pivot.pivottables.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.tablesheet.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.ganttsheet.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.formulapanel.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.report.reportsheet.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/plugins/gc.spread.sheets.io.0.0.0.min.js"></script>

       

        <script type="text/javascript" src="scripts/resources/ko/gc.spread.sheets.resources.ko.0.0.0.min.js"></script>


            <script type="text/javascript" src="scripts/gc.spread.sheets.designer.resource.ko.0.0.0.min.js"></script>

        <script type="text/javascript" src="scripts/gc.spread.sheets.designer.all.0.0.0.min.js"></script>

        <script type="text/javascript">

            window.onload = function () {

                // Set license key

                GC.Spread.Sheets.LicenseKey = 'xxx';

                GC.Spread.Sheets.Designer.LicenseKey = 'xxxx';


                    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));

            }

        </script>

    </body>


    </html>

    Step 5: You can view the designer components in the browser.

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    Designer Component Screen Layout

    View

    React

    Angular

    Framework support

    The SpreadJS Designer component provides support for JavaScript frameworks to help developers easily achieve rapid web development and efficient code maintenance. Learn how to get started with the Designer component in each framework.

    Frequently Asked Questions

    SpreadJS Web Excel Editor FAQ

    Q. What is the difference between SpreadJS and Designer components? ▼
    The Designer component can be thought of as a complete Excel web editor built with the UI and API provided by SpreadJS. With the Designer component, you can implement a familiar Excel screen on the web with just a few lines of code, without developing a separate screen layout.
    Q. What is the licensing policy for using the Designer component? ▼
    To officially use the designer component, a "SpreadJS Developer License" is required. The designer component license can only be purchased by customers with a developer license, and you only need one license per project. (A deployment license is not required for development and testing on a local PC or localhost.)
    Q. Does the SpreadJS Designer component also include SpreadJS controls? ▼
    The SpreadJS designer component is sold separately from SpreadJS, per project, and is not included with other controls in the package. Furthermore, purchasing and using the designer component requires a SpreadJS developer license.
    Q. How do I obtain the deployment key when deploying a designer component? ▼
    To obtain a designer distribution key, you must own or purchase the following three licenses:

    SpreadJS Developer License
    Designer Component License
    Distribution License If you have purchased/owned a distribution license, we will provide you with the following two distribution keys for the requested domain/IP:
    SpreadJS Distribution Key
    Designer Component Distribution Key You must register both keys in your JS code so that the designer component will work properly when deployed to the server.

    * Note
    If you are already using a SpreadJS distribution key for the same version, you can purchase a designer component license without purchasing an additional distribution license and then request a distribution key, and we will provide you with a designer component distribution key.
    Q. Are macros and VBA supported in SpreadJS and Designer components? ▼
    Unfortunately, macros and VBA are limited to desktop Excel and are technically difficult to support on the web. This also applies to other Excel services offered on the web, such as Google Sheets and MS Excel for the Web.

    However, if you need the functionality of a previously used macro, you can implement the same code or actions yourself using JavaScript coding.