How to get data from Canvas

Posted by: jothivignesh.c on 22 April 2019, 11:49 pm EST

Please login to follow topic

jothivignesh.c
- Post Options:
- Link
  Copy
Posted 22 April 2019, 11:49 pm EST

Hi Team,

I am trying to fetch the data from our Application. In our application SpreadJS is showing as Canvas on DOM Structure. I am unable get any cell data. Could any one help me on this?

Thanks in Advance.
adisa.craig
- Post Options:
- Link
  Copy
Posted 23 April 2019, 4:53 am EST

Using jQuery : var spread = $(‘#element-used-to-load-spread’).data(‘workbook’)
jothivignesh.c
- Post Options:
- Link
  Copy
Posted 23 April 2019, 6:37 pm EST

Hi,

adisa.craig Thanks for the reply.

I am using Selenium for Automation. Any idea how to get data using Selenium. While inspecting in DOM it is showing as Canvas.

sharad.tomer

Post Options:
Link
Copy

Posted 23 April 2019, 11:47 pm EST

Hi,

In case to Selenium, you need to get the spreadInstance and then use its getValue() method to get the value of a cell.

Please refer to the following code snippet:

var webDriver = new OpenQA.Selenium.Chrome.ChromeDriver();
            webDriver.Navigate().GoToUrl("http://localhost/test.html");
            var hostDiv = webDriver.FindElement(By.Id("spreadDiv"));
            //Create spreadJS
            webDriver.ExecuteScript("window.testSpread = new GcSpread.Sheets.Spread(arguments[0]);", hostDiv);
            //Set Cell Value
            webDriver.ExecuteScript("window.testSpread.getActiveSheet().setValue(0,0,'1');");
            //Get cell value
            object value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");
            Assert.AreEqual("1", value);

Regards

jothivignesh.c

Post Options:
Link
Copy

Posted 24 April 2019, 1:11 am EST

sharad.tomer:

Hi,

In case to Selenium, you need to get the spreadInstance and then use its getValue() method to get the value of a cell.

Please refer to the following code snippet:

var webDriver = new OpenQA.Selenium.Chrome.ChromeDriver();
            webDriver.Navigate().GoToUrl("http://localhost/test.html");
            var hostDiv = webDriver.FindElement(By.Id("spreadDiv"));
            //Create spreadJS
            webDriver.ExecuteScript("window.testSpread = new GcSpread.Sheets.Spread(arguments[0]);", hostDiv);
            //Set Cell Value
            webDriver.ExecuteScript("window.testSpread.getActiveSheet().setValue(0,0,'1');");
            //Get cell value
            object value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);");
            Assert.AreEqual("1", value);

Regards

Hi,

Could you please help me on how to get the Spread Instance?

I am completely new to this.

Here below is our DOM Structure for your reference:

<canvas id="dataview-spreadJsvp_vp" width="2014" height="1794" style="width: 1007px; height: 897px; cursor: default;">You need a browser which full supports HTML5 Canvas to run SpreadJS</canvas>

Thanks.

sharad.tomer
- Post Options:
- Link
  Copy
Posted 24 April 2019, 11:08 pm EST
Hi,

You could get the spreadInstance using the findControl method. In the findControl method, we need to pass the host element for the spread. HostElement is the element which is passed in the Workbook constructor when creating the workbook/spreadSheet. Based on the code snippet provided in your application, hostElement for the spread should be the element with id ‘dataview-spreadJs’.

Please refer to the following code snippet:

// get hostElement var hostDiv = webDriver.FindElement(By.Id("dataview-spreadJs")); // get spreadInstance and save it on window object for easy access webDriver.ExecuteScript("window.testSpread = new GC.Spread.Sheets.findControl(arguments[0]);", hostDiv); // get Cell value of cell 0,0 var value = webDriver.ExecuteScript("return window.testSpread.getActiveSheet().getValue(0,0);"); // test value Assert.AreEqual("1", value);

Further please let us know in which environment you are using Selenium, like is it java or nodeJS. Also if the issue persists for you, please share a small sample replicating the issue so that we could investigate it further.

Regards
aseemmalhotra7
- Post Options:
- Link
  Copy
Posted 17 June 2019, 6:48 pm EST

Hi Team,

I am trying to automate a spreadjs web application using protractor. I am not able to find any cell, row, column etc on spreadjs using locators as it is inside a canvas.

Below is the example:

Please suggest how to find an element inside a canvas.

Also kindly suggest which tool should I use to automate(protractor/selenium) spreadjs web application which is a js website.

Regards,

Aseem Malhotra
sharad.tomer
- Post Options:
- Link
  Copy
Posted 18 June 2019, 3:29 pm EST

Hi Aseem,

For automated testing, first, you need to get the instance of the spreadjs Workbook object and then use the various methods like getValue(), getColumnCount() etc provided by the spread to test various functionalities.

We have prepared a sample to demonstrate the process using protractor. Please refer to the attached sample and let us know if you face any issues. In the attached sample, first, run ‘npm install’ command to install protractor and then run ‘npm run test’ command to execute the test cases.

• SpreadJS API: http://help.grapecity.com/spread/SpreadSheets12/webframe.html#SpreadJS.html

Also, SpreadJs doesn’t require any special testing framework or tool so you may use any testing tool of your liking.

Regards

Sharad

spread-selenium-protractor.zip
jothivignesh.c
- Post Options:
- Link
  Copy
Posted 25 June 2019, 1:43 am EST
Hi Team,

I am using the below code

js.executeScript("return window.testSpread.getActiveSheet().setValue(" + ri + "," + ci + ",\"22,00\");");

to set values in SpreadJS. I am able to set the values. But it is not saved. After saving the old value remains. Could any one help me on this.

Thanks in Advance
sharad.tomer
- Post Options:
- Link
  Copy
Posted 25 June 2019, 3:23 pm EST

Hi,

This post seems duplicate. Please refer to the following thread:

https://www.grapecity.com/forums/spread-sheets/update-value-in-spreadjs-u

Regards
bhuvnesh.sharma
- Post Options:
- Link
  Copy
Posted 6 February 2020, 12:24 am EST - Updated 3 October 2022, 1:16 am EST
Hi Sharad,

I am trying to implement @grapecity/spread-sheets in a typescript file, and trying to execute GC.Spread.Sheets, it throws below error : -

[12:38:08] I/launcher - Running 1 instances of WebDriver

[12:38:08] I/direct - Using ChromeDriver directly…

DevTools listening on ws://127.0.0.1:59963/devtools/browser/7d2916d2-ab5b-42a9-ad46-67ec1eec652b

[12:38:20] E/launcher - Error: ReferenceError: document is not defined

Attached is the structure of libraries.

And following is the implementation of protractor in vs code : -

import * as GC from ‘@grapecity/spread-sheets’;

fit(‘test GC’, () => {

browser.waitForAngularEnabled(false);

browser.get(‘C:/Users/Downloads/spread_selenium_protractor/public/protractorSample.html’);

let isSpreadCreated = browser.executeScript(function (id) { let spreadInstance = GC.Spread.Sheets.findControl(id); return !!spreadInstance; }, 'ss'); expect(isSpreadCreated).toBeTruthy(); });

Had been struggling with the issue for almost a week now, did not any references on the internet for .ts files. Please help, it is really urgent.

Many thanks,

Bhuvnesh

[quote=“sharad.tomer”]

Hi Aseem,

For automated testing, first, you need to get the instance of the spreadjs Workbook object and then use the various methods like getValue(), getColumnCount() etc provided by the spread to test various functionalities.

We have prepared a sample to demonstrate the process using protractor. Please refer to the attached sample and let us know if you face any issues. In the attached sample, first, run ‘npm install’ command to install protractor and then run ‘npm run test’ command to execute the test cases.

• SpreadJS API: http://help.grapecity.com/spread/SpreadSheets12/webframe.html#SpreadJS.html

Also, SpreadJs doesn’t require any special testing framework or tool so you may use any testing tool of your liking.

Regards

Sharad

spread-selenium-protractor.zip

[/quote]
433×587 7.29 KB
sharad.tomer
- Post Options:
- Link
  Copy
Posted 6 February 2020, 9:27 pm EST

Hi Bhuvnesh,

Could you please share a small sample replicating the issue that we could investigate

Regards

Sharad
bhuvnesh.sharma
- Post Options:
- Link
  Copy
Posted 9 February 2020, 2:13 am EST

Hi Sharad,

Please find attached the zip.

Regards,

Bhuvnesh

[quote=“sharad.tomer”]

Hi Bhuvnesh,

Could you please share a small sample replicating the issue that we could investigate

Regards

Sharad

[/quote]workspace.zip
sharad.tomer
- Post Options:
- Link
  Copy
Posted 9 February 2020, 8:23 pm EST
Hi Bhuvnesh,

The issue in the attached project is that you are importing the GC module in the spec file, now spec executes in node context instead of the browser where the document object is not available. So rather than importing the GC module in the spec file, we should use the GC object exposed on the window context in the sample. Update the myspec.ts file as below and that should fix the issue:

let isSpreadCreated = browser.executeScript(function (id) { let spreadInstance = window["GC"].Spread.Sheets.findControl(id); return !!spreadInstance; }, 'ss'); expect(isSpreadCreated).toBeTruthy();
bhuvnesh.sharma
- Post Options:
- Link
  Copy
Posted 10 February 2020, 5:13 pm EST
Hi Sharad,

Now I get below error : -

Message:

Failed: javascript error: Cannot read property ‘Spread’ of undefined

(Session info: chrome=80.0.3987.87)

(Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.17763 x86_64)

Stack:

JavascriptError: javascript error: Cannot read property ‘Spread’ of undefined

(Session info: chrome=80.0.3987.87)

(Driver info: chromedriver=79.0.3945.16 (93fcc21110c10dbbd49bbff8f472335360e31d05-refs/branch-heads/3945@{#262}),platform=Windows NT 10.0.17763 x86_64)

Please suggest.

Thanks,

Bhuvnesh

sharad.tomer:

Hi Bhuvnesh,

The issue in the attached project is that you are importing the GC module in the spec file, now spec executes in node context instead of the browser where the document object is not available. So rather than importing the GC module in the spec file, we should use the GC object exposed on the window context in the sample. Update the myspec.ts file as below and that should fix the issue:

let isSpreadCreated = browser.executeScript(function (id) { let spreadInstance = window["GC"].Spread.Sheets.findControl(id); return !!spreadInstance; }, 'ss'); expect(isSpreadCreated).toBeTruthy();
sharad.tomer
- Post Options:
- Link
  Copy
Posted 10 February 2020, 11:14 pm EST
It looks like your in your main application spread-sheets is added as npm modules. In this case, we also need to expose the GC module on the window object from our main application.

Add the following line in your main.js file of the application(actual project file, not in specs file):

import * as GC from "@grapecity/spread-sheets"; window["GC"] = GC;
bhuvnesh.sharma
- Post Options:
- Link
  Copy
Posted 11 February 2020, 5:05 pm EST
Hi Sharad,

Placed it in onPrepare of conf.js, however I am getting the same error - “document is not defined”.

Please suggest.

Thanks,

Bhuvnesh

sharad.tomer:

It looks like your in your main application spread-sheets is added as npm modules. In this case, we also need to expose the GC module on the window object from our main application.

Add the following line in your main.js file of the application(actual project file, not in specs file):

import * as GC from "@grapecity/spread-sheets"; window["GC"] = GC;
vitor.ghiotti
- Post Options:
- Link
  Copy
Posted 30 March 2020, 5:43 am EST

Hello everybody,

how do i use findcontrol in version 9?
sharad.tomer
- Post Options:
- Link
  Copy
Posted 30 March 2020, 5:29 pm EST
Hi,

You may use the findControl method in SJS 9 in the following way:

var spread = GcSpread.Sheets.findControl(document.getElementById("idOfSJSDiv"));
vitor.ghiotti
- Post Options:
- Link
  Copy
Posted 30 March 2020, 9:36 pm EST - Updated 3 October 2022, 1:11 am EST

Good Morning,

I used the command you sent me, but an error occurred.

below the SpreadJS html

You need a browser which full supports HTML5 Canvas to run SpreadJS

below the python code with selenium I want to run

browser.execute_script(“var spread = GcSpread.Sheets.findControl(document.getElementById(‘spreadsheetDocumentvp_vp’));alert(spread.getSheetCount());”)

below the error returned by…

JavascriptException: Message: javascript error: Cannot read property ‘getSheetCount’ of undefined

(Session info: chrome=80.0.3987.149)

please inform me where is my error
sharad.tomer
- Post Options:
- Link
  Copy
Posted 31 March 2020, 5:18 pm EST
The id mentioned in the code snippet is not the id of the actual canvas element but the id of the element which was passed as the host element to the spread constructor.

ex, If the spread is constructed like

var spread = new GcSpread.Sheets.Spread(document.getElementById('spreadsheetDocument'), { sheetCount: 3 });

Then you may use the findControl as follows:

var spread = GcSpread.Sheets.findControl(document.getElementById('spreadsheetDocument');

Hope this clears, please let us know if you still have some confusion.
vitor.ghiotti
- Post Options:
- Link
  Copy
Posted 1 April 2020, 1:05 am EST - Updated 3 October 2022, 1:11 am EST

Good Morning.

your tip worked, thanks.

for now without further doubts
mais.baath
- Post Options:
- Link
  Copy
Posted 15 July 2020, 12:21 am EST

Am using selenuim c# ı can’t get canvas data from webpage , It is so important for me Please Help me
sharad.tomer
- Post Options:
- Link
  Copy
Posted 15 July 2020, 6:33 pm EST

Hi,

Could you please explain what is the exact issue you are facing? As explained above in this post, we need to use the SpreadJS API method such as getValue() to get cell value.

Also, to be able to use the spread API methods, you would first need to find the spread instance. Please refer to the following comment:

https://www.grapecity.com/forums/spread-sheets/how-to-get-data-from-canva#hiyou-could-get-the-spread

If you are unable to access the GC object on the window, then it is possible that spread is added as npm module in which case, we need to expose the GC object on the window ourselves. Refer to following comment:

https://www.grapecity.com/forums/spread-sheets/how-to-get-data-from-canva#it-looks-like-your-in-your

Regards

Please login to reply to thread

Need extra support?

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

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.