Shapes not showing

Shapes not showing

Posted by: kb on 8 February 2023, 7:59 am EST

• 

  kb

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 February 2023, 7:59 am EST

  Hi,

  Shapes are not shown in SpreadJs Vue.
  
  I’ve created a new sjs file with just one rectangle shape in SpreadJs desinger.
  
  When i load the sjs file in my vuejs application the shape is not shown.
  
  The sjs file is loaded by fetch api as a blob. All other content is correctly loaded and shown in that file.
  
  I have imported @grapecity/spread-sheets-shapes in my vue file where the spreadjs component is used.

  My current SpreadJs Version is 16.0.3

  Kind Regards
  
  Kim

• 

  kb

  • Post Options:
  • Link
    Copy

  Posted 9 February 2023, 3:52 am EST

  Hi,

  the issue seems to be solved.
  
  I’ ve changed package.json and set all @grapecity/… dependencies from “16.0.3” to “latest” and run another npm install.

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 9 February 2023, 11:31 pm EST

  Hi Kim,

  We are thrilled to hear that your problem has been solved. In addition to that, I have taken the time to create a test sample which demonstrates how to retrieve a sjs file using the fetch() method, converting the response to a blob, and then loading the blob object into the spread using the spread.open() method.

  It’s important to mention that you will need to have the @grapecity/spread-sheets-shapes and @grapecity/spread-sheets-io packages imported in your project in order to have support for shapes and sjs import/export functionality respectively.

  Please take a look at the code snippet and the sample I have attached for reference.

          // fetching the sjs file
          fetch('file.sjs')
          .then((res) => {
              return res.blob();
          })
          .then((blob) => {
              spread.open(blob, (args) => {
                  console.log('sjs file loaded');
              }, console.log);
          })

  Sample: https://jscodemine.grapecity.com/share/2_i6jrnSSk6Hjuxs8S6mZg/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.vue"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.vue"}

  Doc reference

  spread.open(): https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.Workbook#open

  Regards,

  Ankit