Javascript project setup

Aspose.Cells Product Family
1

I have frontend project on vue + javascript and I want to show excel file in browser.

I installed the gridjs-spreadsheet package via npm,
on backend site I convert excel to json:

workbook.Save(stream, SaveFormat.Json);
and then I send the json to the frontend to load it in the viewer.

When I follow gridjs-spreadsheet code example:

const s = new Spreadsheet("#gridjs-demo")
  .loadData({}) // load data
  .change(data => {
    // save data to db
  });

// data validation
s.validate()

I receive errors like Property 'change' does not exist on type 'void'. or , Property 'validate' does not exist on type 'void'..
The document is not showing in the viewer, in the console I receive error

ReferenceError: $ is not defined
    at e.Xs (xspreadsheet.js:12:1)
    at new e (xspreadsheet.js:12:1)
    at new e (xspreadsheet.js:12:1)

How should I pass json result to Spreadsheet correctly?
Is any better way to edit xlsx in browser with aspose? We can’t use asp net mvc because we have spa type frontend.

2

@D04486411,

Could you please zip and attach sample project and sample file(s) to demonstrate the issue. We will check your issue soon.

3

@D04486411
from the issue you described.
I think you need to include the require lib first .

QQ截图20231109090936.png1122×616 17.8 KB

//includ all the dependencies 
//Including jszip
import JSZip from 'jszip';
window.JSZip = JSZip;
//Including jQuery
import $ from 'jquery';
window.$ = $;
//Including gridjs-spreadsheet
import 'gridjs-spreadsheet/xspreadsheet.css';
import Spreadsheet from "gridjs-spreadsheet";

here is the example:

and the json you can check:DetailJson method in GridJs2Controller
in this method it generate the json for client usage.

 private ActionResult DetailJson(string path)
        {
            GridJsWorkbook wbj = new GridJsWorkbook();
            wbj.WarningCallback = new CppWarningCallback();
            string filename = Path.GetFileName(path);
            try
            {
                GridInterruptMonitor m = new GridInterruptMonitor();
                wbj.SetInterruptMonitorForLoad(m, 50 * 1000);
                Thread t1 = new Thread(new ParameterizedThreadStart(InterruptMonitor));
                t1.Start(new object[] { m, 90 * 1000 });

             


                using (FileStream fs = new FileStream(path, FileMode.Open))
                {
                    /*
                    GridLoadFormat lf = GridJsWorkbook.GetGridLoadFormat(Path.GetExtension(path));
                    if(lf!= GridLoadFormat.Csv&&lf!= GridLoadFormat.Tsv)
                    {
                        lf = GridLoadFormat.Auto;
                    }
                    wbj.ImportExcelFile(fs,lf);
                    */
                    GridLoadFormat lf = GridJsWorkbook.GetGridLoadFormat(Path.GetExtension(path));
                    LoadFormat clf = LoadFormat.Auto;
                    if (lf == GridLoadFormat.Csv  )
                    {
                        clf = LoadFormat.Csv;
                    }else if (lf == GridLoadFormat.Tsv)
                    {
                        clf = LoadFormat.Tsv;
                    }
                    Workbook wb = new Workbook(fs, new LoadOptions(clf));
                    wbj.ImportExcelFile(wb);
                }

            }
            catch (Exception ex)
            {
               
                if (ex is GridCellException)
                {
                    return Content(wbj.ErrorJson(((GridCellException)ex).Message + ((GridCellException)ex).Code), "text/plain", System.Text.Encoding.UTF8);
                }
                return Content(wbj.ErrorJson(ex.Message), "text/plain", System.Text.Encoding.UTF8);
            }
            //return File(stream, "application/octet-stream", "streamfile");
            return Content(wbj.ExportToJson(filename), "text/plain", System.Text.Encoding.UTF8);
        }

the key point is here: wbj.ExportToJson(filename)
for example :
here is a simple way:

 string file=@"c:/test.xlsx";
 Workbook wb = new Workbook(file);
 GridJsWorkbook wbj = new GridJsWorkbook();
 string filename = Path.GetFileName(file);
 wbj.ImportExcelFile(wb);
 string json=wbj.ExportToJson(filename);

here is the document guide：