Border is added empty cells in xlsx file, when loading xlsx blob

Technical Support
1

Product: Javascript WEB SDK

Product Version: 11.7.1

Please give a brief summary of your issue:
Border is added empty cells in xlsx file, when loading xlsx blob. I integrated apryse in angular application.

Please describe your issue and provide steps to reproduce it:
I am loading a xlsx blob file to to webviewer. after loading border is added to empty cells. Code is as below
WebViewer({
path: ‘../../lib/webviewer’,
licenseKey: this.commonService.aspyreKey,
initialDoc: ‘’,
// enableFilePicker: true,
fullAPI: true,
css: ‘assets/css/webviewer.css’
}, this.viewer.nativeElement).then(instance => {
this.viewerInstance = instance;
const { UI } = instance;
UI.disableElements([
‘toolbarGroup-View’, // entire View menu
‘toolbarGroup-Edit’, // entire Edit menu
‘toolbarGroup-Annotate’, // entire Annotate menu
‘toolbarGroup-FillAndSign’,
‘toolbarGroup-Shapes’,
‘toolbarGroup-Insert’,
‘menuOverlay’, // context menu
‘downloadButton’, // single button
‘toolbarGroup-Edit’,
‘toolbarGroup-Forms’,
‘panToolButton’
]);
const file = new File([this.file], ‘document.xlsx’, { type: this.file.type });
instance.UI.loadDocument(file);
})

image
image1546×289 25.4 KB

image
image1546×289 25.4 KB

Please provide a link to a minimal sample where the issue is reproducible:

3

Hello, I’m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re experiencing an issue where borders are being added to empty cells when loading an XLSX file as a blob in your Angular application using Apryse’s Web SDK. This could be due to the default styling applied to the spreadsheet cells when rendered.

Some things you can try:

  • Ensure that the styling of cells, particularly for borders, is correctly set before loading the document. If the default settings are adding borders, you might need to explicitly set the styles for empty cells using the API.

  • Use the Cell.setStyle API to modify the cell styles programmatically after loading the document.

  • Check if the CSS applied via webviewer.css is affecting the rendering of your spreadsheet cells and adjust as necessary.

  • Ensure the enableOfficeEditing option is set to true if you are switching from the PDF editor to the spreadsheet editor.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hello @stlokesh47,

Thank you for posting on our forum.

To diagnose further we require the following information.

  1. Source input XLSX file used for testing
  2. JavaScript console output showing all warnings and errors.
  3. Network panel showing all failed network traffic
  4. Can you reproduce the issue using our samples (especially on our site)?
  5. Does the issue only occur in certain browsers and/or devices? If so what are the details?
  6. Are you using WebViewer Server? If so, what version of WebViewer Server?
  7. Are you able to reproduce the issue on our latest release (Version 11.9)?

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

5
  1. I am getting a blob file. converting it to file and loading to viewer

const file = new File([this.file], ‘document.xlsx’, { type: this.file.type });
instance.UI.loadDocument(file);

  1. webviewer-core.min.js:226 Your server has not been configured to serve WebAssembly threads.

(anonymous) @ webviewer-ui.min.js:1Understand this warning

18[Intervention] Slow network is detected. See for more details. Fallback font will be used while loading:

OfficeWorker.js:39 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding.

fetchSelf @ OfficeWorker.js:122

k.onmessage @ OfficeWorker.js:122Understand this warning

OfficeWorker.js:39 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding.

self.Module.instantiateWasm @ OfficeWorker.js:97

createWasm @ d88a7fe0-5428-4057-90a1-f805b4dc03c7:1

(anonymous) @ d88a7fe0-5428-4057-90a1-f805b4dc03c7:1

b @ OfficeWorker.js:98

fetchSelf @ OfficeWorker.js:122

k.onmessage @ OfficeWorker.js:122Understand this warning

PDFworker.js:44 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding.

f.onmessage @ PDFworker.js:282Understand this warning

PDFworker.js:44 There may be some degradation of performance. Your server has not been configured to serve .gz. and .br. files with the expected Content-Encoding.

  1. No network failings

  2. i can not reproduce in your site, because i am loading file from blob.

  3. all devices I am getting this issue

  4. I am using WEB Viewer SDK in angular application.

  5. yes I am able to reproduce.

and when i am downloading the file using javascript, this issue is not reproducing

1 Like
6

Hello @stlokesh47,

Thank you for the information.

To take a closer look at the issue, please also provide the source XLSX file (the file used in the original screenshot) that you are loading in as a blob so that we can try to reproduce the issue on our end.

Additionally, if there are any other files that can reproduce this issue, feel free to provide those as well.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like
7

Attached is the response i am getting from the API. so i converted it to xlsx file using below code
const file = new File([this.file], ‘document.xlsx’, { type: this.file.type });
instance.UI.loadDocument(file);
here this.file is the response shown in Image.
please tell me, how i can send that response

apruseissue
apruseissue1909×734 106 KB

1 Like
8

Hello @stlokesh47,

Thank you for the update.

If you have not already, please try loading the file like the following and let us know if it resolves your issue:

instance.UI.loadDocument(file, {
  officeOptions: {
    formatOptions: {
      excelDefaultCellBorderWidth: 0,
    },
  },
});

If that does not resolve your issue, we will need to test the document on our end. Please provide a public URL that we can fetch the .xlsx file from or the raw XLSX file itself. Something like the following: https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like