SpreadJS Designer problem

Posted by: georgeg on 2 January 2025, 7:12 pm EST

    • Post Options:
    • Link

    Posted 2 January 2025, 7:12 pm EST

    Hi,

    Having a problem trying to demo a basic example of SpreadJS Designer. Was wondering if you could help me… my index.html page looks like this:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>SpreadJS Designer Export Example</title>
            <link href="css/gc.spread.sheets.excel2013white.18.0.0.css" rel="stylesheet" type="text/css" />
            <link href="css/gc.spread.sheets.designer.18.0.0.min.css" rel="stylesheet" type="text/css">
            <script src="scripts/gc.spread.sheets.all.18.0.0.min.js"></script>
            <script src="scripts/gc.spread.sheets.designer.all.18.0.0.min.js"></script>
            <script src="scripts/gc.spread.sheets.designer.resource.en.18.0.0.min.js"></script>
        </head>
        <body>
            <div id="designerHost" style="width:100%; height:90vh"></div>
            <button id="exportButton">Export to API</button>
        
            <script>
                window.onload = function () {
                    if (typeof GC === 'undefined' || typeof GC.Spread === 'undefined' || typeof GC.Spread.Sheets === 'undefined' || typeof GC.Spread.Sheets.Designer === 'undefined') {
                        console.error('SpreadJS Designer is not loaded correctly.');
                        return;
                    }
    
                    var designerHost = document.getElementById("designerHost");
                    var designer = new GC.Spread.Sheets.Designer.Designer(designerHost, GC.Spread.Sheets.Designer.DefaultConfig);
                    var spread = designer.getWorkbook();
    
                    document.getElementById("exportButton").addEventListener("click", function () {
                        spread.save(function (blob) {
                            sendFileToAPI(blob, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
                        }, 'xlsx');
                    });
                }
    
                function sendFileToAPI(fileBlob, mimeType) {
                    var formData = new FormData();
                    formData.append('file', fileBlob, 'spreadsheet.xlsx');
    
                    fetch('https://your-api-endpoint.com/upload', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('File uploaded successfully:', data);
                    })
                    .catch(error => {
                        console.error('Error uploading file:', error);
                    });
                }
            </script>
        </body>
    </html>
    

    but I am getting the following error messages:

    I see the following error:

    Uncaught TypeError: Cannot read properties of undefined (reading ‘DR’)

    at …/localization/resentry (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227128)

    at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)

    at ./src/commands/defaultConfig.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:781567)

    at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)

    at ./src/all.entry.ts (gc.spread.sheets.designer.all.18.0.0.min.js:1:301486)

    at i (gc.spread.sheets.designer.all.18.0.0.min.js:1:8227387)

    at gc.spread.sheets.designer.all.18.0.0.min.js:1:8227773

    at gc.spread.sheets.designer.all.18.0.0.min.js:1:8227884

    at gc.spread.sheets.designer.all.18.0.0.min.js:1:1198

    at gc.spread.sheets.designer.all.18.0.0.min.js:1:1204

    …Am I missing something?

    I am using the 30 day trial to see if it meets our needs.

    George C. Geschwend

    Developer

    Pipkins Inc

  • Posted 3 January 2025, 3:00 am EST

    Hi,

    Thank you for providing the necessary information to replicate the behavior on my end.

    The issue occurs because the resource script file is added after the designer script file. To resolve this, ensure that the spreadsheet references are added before the Designer Component references. Specifically, the Designer Component resource file (e.g., gc.spread.sheets.designer.resource.en.x.x.x.min.js) must always be referenced before gc.spread.sheets.designer.all.x.x.x.min.js.

    After placing the resource script file before the designer script file, the mentioned issue is resolved. However, another issue arises due to missing shape and chart script files. Adding these files resolves the problem entirely. Please refer to the attached sample, “Sample.zip,” for guidance: Sample.zip.

    Additionally, see the snippet below for the correct order of script references.

    [code]

    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.datacharts.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.18.0.0.min.js"></script>
    
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.ganttsheet.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.formulapanel.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.report.reportsheet.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.io.18.0.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.mescius.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.18.0.0.min.js"></script>
    
    <script type="text/javascript" src="./lib/scripts/gc.spread.sheets.designer.resource.en.18.0.0.min.js"></script>
    <script type="text/javascript" src="./lib/scripts/gc.spread.sheets.designer.all.18.0.0.min.js"></script>[/code]
    

    For more details on how to initialize and use the SpreadJS Designer, refer to this article:

    https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/quick-start-designer#use-designer-component-with-a-new-spreadsheet

    Regards,

    Priyam

  • Posted 3 January 2025, 11:30 am EST - Updated 3 January 2025, 12:09 pm EST

    Thank you Priyam,

    So it seems like you need to have a bunch of other js files to get this to work. Interesting.

    and the

    <script src="scripts/gc.spread.sheets.*all.*18.0.0.min.js"></script> 

    doesn’t encompass everything in the correct order?

    So I will add the above files and change the order of the gc.spread.sheets.designer.*.js files as you prescribed.

    George

  • Posted 3 January 2025, 12:07 pm EST

    Also…

    I am getting this error in the above html code… even after I add the additional javascript file references.

    Uncaught TypeError: GC.Spread.Sheets.Designer is not a constructor
        at window.onload (index.html:43:32)

    So I must be messing up someplace else.

    Thanks!

    George

  • Posted 6 January 2025, 2:16 am EST

    Hi George,

    Regarding your question about “doesn’t encompass everything in the correct order?”:

    You only need this script:

    <script src="scripts/gc.spread.sheets.*all.*18.0.0.min.js"></script>  

    when working solely with SpreadJS. However, if you are adding the designer component, which provides an Excel-like ribbon, you will also need the additional files mentioned earlier to ensure the designer component works seamlessly with SpreadJS and follows the correct file order.

    Regarding the “GC.Spread.Sheets.Designer is not a constructor” issue:

    It seems you are using GC.Spread.Sheets.Designer directly to create a designer instance, but this is incorrect. Instead, use GC.Spread.Sheets.Designer.Designer to instantiate the designer. Ensure the required scripts are included. Please refer to the following example:

    var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), '', spread);

    Additionally, you can check the sample downloaded from this CDN link:

    http://cdn.mescius.com/spreadjs/18.0.0/Files/SpreadJS.Release.18.0.0.zip

    If the issue persists, to assist you better, please share a minimal working sample with steps to reproduce the behavior, or modify the existing sample accordingly. A GIF or video demonstrating the issue would also be very helpful for a more thorough investigation.

    Regards,

    Priyam

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels