Javascript project setup

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

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.


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

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

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

            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);
 string json=wbj.ExportToJson(filename);

here is the document guide: