How to open/show an excel file on button click in Angular 8 and C#

Hello,

In my web app, there are some excel files stored on one of the computer in network. When user clicks on specific file name then that excel file should be opened and user will be able to see that excel file. We have used angular 8 for front end and asp.net mvc 5 for back end.

The code which i have done is like.

File path = "IP address of computer\folder name\ excel file"

Imagepathusername and Imagepathpassword to access computer in network o get excel sheet . This is the user name and password of computer on which excel file is stored.

public byte[] GetExcelFile(string FilePath, string ImagePathUserName, string ImagePathPassword)
{
byte[] result = null;
try
{
// username and password for permission to access shared folder
var impersonationContext = new WrappedImpersonationContext(FilePath, ImagePathUserName, ImagePathPassword);
impersonationContext.Enter();
if (!File.Exists(FilePath))
{
// result = [];
}
else
{
// Load file meta data with FileInfo
FileInfo fileInfo = new FileInfo(FilePath);
// The byte[] to save the data in
byte[] data = new byte[fileInfo.Length];
// Load a filestream and put its content into the byte[]
using (FileStream fs = fileInfo.OpenRead())
{
fs.Read(data, 0, data.Length);
}
result = (data);
}
impersonationContext.Leave();
}
catch (Exception ex)
{
objcommonrepository.LogError(ex.Message);
}
return result;
}

my service.ts code is like

GetExcelFile(FilePath, ImagePathUserName, ImagePathPassword) {
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.get(environment.apiUrl + 'ImageUpload/GetPdfFile?FilePath=' + FilePath + '&ImagePathUserName=' + ImagePathUserName
+ '&ImagePathPassword=' + ImagePathPassword,
{ headers: headers }).pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}

my component.ts code is like

this.imageuploadservice.GetExcelFile(FilePathToRead, ImagePathUserName, ImagePathPassword).subscribe( data => {
if (data != null && data.length > 0) {
onst blob = new Blob([data],{ type: 'application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet' });
const url= window.URL.createObjectURL(blob);
window.open(url);
}
;

How to open excel file? any help would be appreciated

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Siddharth Gajbhiye5y ago
Hello
To download the excel on click of the button
if (data != null) {
        const linkSource = 'data:application/' + FileType + ';base64,' + data;
        const downloadLink = document.createElement("a");
        const fileName = item + '.' + FileType;
        downloadLink.href = linkSource;
        downloadLink.download = fileName;
        downloadLink.click();

      }
Try the above code
Thanks
Rijwan Ansari5y ago
You can implement document viewer.

Try this one

https://www.npmjs.com/package/ngx-doc-viewer

This component can be used to show several different document types in an Angular app.