Can we render a MSOffice File in the DocumentEditor using base64 blob file or a download file?

[Jethro Torres]

So the use case here is we need to render a MS Office File (doc, docx, pptx, ppt, xls, xlsx) using the DocumentEditor. Our Java based API can return two kinds of response:

1. The base64 of the blob of the file.
2. A download link of the file.

Question here - is it possible to to render a file, just by using those and without having to convert it to sfdt format? I found some resources that can do this however this is just for the PDF. 

[Kavitha Muralitharan]

Hi Jethro,

# Regarding  doc, docx:

Unfortunately, rendering a file without the sfdt format is not possible. In Document Editor, the documents are stored in their own format called Syncfusion Document Text (SFDT).You can convert word documents into SFDT format using the .NET Standard library Syncfusion.EJ2.WordEditor.AspNet.Core by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.

# Regarding “.pptx” and “..ppt”:

Syncfusion doesn’t have a native Viewer control for view or edit the PowerPoint Presentation file (PPTX format document).But we have PowerPoint Viewer to view the PowerPoint presentation through  PdfViewer by converting it as PDF using Syncfusion Presentation library.

Syncfusion Presentation library used to create, read, write Microsoft PowerPoint files and convert PowerPoint presentation to PDF/image by using C#, VB.NET, and managed C++ code.

The current version of Syncfusion Presentation supports the .PPTX, .PPTM, .POTX, .POTM file formats only. It doesn’t support the PPT file format.

If you have PPTX format files and to view the presentation, as a workaround solution, we suggest you to use our PowerPoint Viewer by convert the PPTX format document to PDF using Essential Presentation library and then you can use the PDF Viewer component to view the converted PPTX document.

Online sample of PowerPoint Viewer in ASP.NET Core,
https://ej2.syncfusion.com/aspnetcore/PowerPoint/PowerPointViewer#/fluent 

Blog to know more about the PowerPoint Viewer,
https://www.syncfusion.com/blogs/post/view-powerpoint-asp-dotnet-core.aspx 

Refer the below UG link to know more about PPTX to PDF conversion using Presentation library,
https://help.syncfusion.com/file-formats/presentation/presentation-to-pdf 

Refer the below links to know about PDF Viewer component,
https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started 
https://ej2.syncfusion.com/angular/demos/#/material/pdfviewer/default 

Note: You can only view the PowerPoint and not able to edit the PowerPoint in this workaround solution.

# Regarding xls, xlsx:

Currently, we are checking with the concerned team and will get back to you with the details on or before February 28, 2024.

Regards,

Kavitha M

[Kavitha Muralitharan]

Jethro,

# Regarding “.xls” and “.xlsx”:

Open from Base64 string:

 

In the Spreadsheet component, there is currently no direct option to open data as a Base64 string. You can achieve this by converting the base64 string as blob data and then converting that blob data to a file using FileReader. And then open the converted file using the open method of our Spreadsheet component. For your convenience, we have prepared the sample to open the base64 string into the spreadsheet and attached along with the code snippet below,

 

Code snippet:

 

created() {

        //Pass the base64 string into the fetch.

        fetch(this.base64String)

        //Convert the base64 to blob.

            .then((response) => response.blob())

            .then((fileBlob) => {

                //Convert blob to file.

                let file: File = new File([fileBlob], 'Sample.xlsx');

                //Open the converted file into the spreadsheet.

                this.spreadsheetObj.open({ file: file });

            });

    }

 

Stackblitz sample: https://stackblitz.com/edit/angular-g3ey6v-sdhdyq?file=src%2Fapp.component.ts

 

For more information, please refer the below documentation link,

 

Documentation link: https://ej2.syncfusion.com/angular/documentation/spreadsheet/how-to/save-and-open-spreadsheet-data-as-base64-string

 

Open from downloadable file link:

 

To open an external URL excel file, you can fetch the remote excel file in the created event. After fetching the excel file, convert it to a blob. And then convert this blob to a file and open this file by using open method of our Spreadsheet component. For your convenience, we have prepared the sample to open the remote excel file into the spreadsheet and attached along with the code snippet below,

 

Code snippet:

 

created() {

        //Pass the downloadable excel file link into the fetch.

        fetch(https://cdn.syncfusion.com/scripts/spreadsheet/Sample.xlsx)

          .then((response) => {

            //Convert the excel file to blob.

            response.blob().then((fileBlob) => {

            //Convert the blob into file.

            let file = new File([fileBlob], "Sample.xlsx");

            //Open the file into Spreadsheet.

            this.spreadsheetObj!.open({ file: file });

            })

          })

    }

 

Stackblitz sample: https://stackblitz.com/edit/angular-f37ujr-trzej5?file=src%2Fapp.component.ts

 

For more information, please refer the below documentation link,

 

Documentation link:  https://ej2.syncfusion.com/angular/documentation/spreadsheet/open-save#open-an-external-url-excel-file-while-initial-load