Opening/Importing Files with Multiple Worksheets Causes Blank Canvas

Opening/Importing Files with Multiple Worksheets Causes Blank Canvas

Posted by: cory.engel on 3 November 2023, 7:35 am EST

• 

  cory.engel

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 November 2023, 7:35 am EST

  We are evaluating SpreadJS. The first requirement is to open Excel files in the component. We tried a simple example using spread.open() and spread.import(). Both methods open either .sjs or .xlsx files as expected, however when switching to other worksheet tabs via the bottom tabs, the worksheet is blank until we click start to interact with the worksheet by clicking the canvas or scrolling. Using the sheet chooser dropdown instead does not show this behavior. Also, if we change the sheet order via drag and drop, the canvas behavior is as expected. It is also a little slower performing once it does paint.

  We’ve tried the same on the Demo examples website without any issue, so we must be missing something. We develop with VUE and have tried Chrome and Edge. We created a simple project example that displays the behavior at this link and also attached below.
  
  https://www.dropbox.com/scl/fi/2v0rhgnnxoee1ivcgh582/spreadsheet.zip?rlkey=itdnrt9ik43kmicx79buvmjww&dl=0

  Please let us know the issue. We have also tried resumePaint(), resumeEvent() and repaint() to no avail.spreadsheet.zip

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 5 November 2023, 3:25 pm EST - Updated 5 November 2023, 3:31 pm EST

  Hi,

  Thanks for sharing the files and sample with us. It is really appreciated that you have shared the sample to reproduce the issue. I was able to replicate it at my end.

  In the sample, you are using the Vue3. In vue3, you will not get the SpreadJS instance directly, instead, you will get a proxy object. You may try to console the “(this.spread)” in the openFile() method to see the changes. Refer to the following screenshot.

  

  1896×929 86.9 KB

  The proxy is used to wrap the common javascript object to an observable object, each field on the object will be wrapped to a property, it will be good for two-way binding (because the framework could get the change in the property set or get method), then one the data field changed, the view will update automatically.

  For common pure data, that is no problem, however, if set the SpreadJS to a data, SpreadJS is not a pure data object, but a very complex javascript object, and the Vue3 proxy mechanism will go through the SpreadJS Instance (using recursion), then wrap everything to a proxy, not only the performance, but some common behavior will also be wrong as seen in this case.

  You may use the official toRaw API to restore the proxy object to the original SpreadJS Instance. You may refer to the following docs on toRaw method: https://vuejs.org/api/reactivity-advanced.html#toraw

  In the “openFile” method, use the following code snippet:

      openFile() {
        const file = document.querySelector('#file').files[0];
        let sjsInstance = toRaw(this.spread);
        sjsInstance.open(
          file,
          () => {
            // success callback to do something
            console.log('done open');
          },
          (e) => {
            console.log(e); // error callback
          }
        );
      },

  Similarly, for the “importExcel” method, use the following code snippet:

      importExcel() {
        const file = document.querySelector('#excel').files[0];
        let sjsInstance = toRaw(this.spread);
        sjsInstance.import(
          file,
          () => {
            // success callback to do something
            console.log('done import Excel');
          },
          (e) => {
            console.log(e); // error callback
          },
          {
            fileType: GC.Spread.Sheets.FileType.excel
          }
        );
      }

  You may also refer to the attached modified sample. Let me know if you still face the issue.

  Regards,

  Ankit

  sample.zip