Download excel file in angular 7 using a blob url

Question

I am trying to download excel file in my angular 7 app using the mime type "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet," but when I'm trying to open the downloaded file it throws me some error saying - http://prntscr.com/ur1nc4.

Here is what I've done inorder to download the file

const filePath = "https://bviewstorage.blob.core.windows.net/9be306d9-acb1-4f25-a54f-5126e021ec6d/hrm/aabe5bd4-940a-4246-979c-581fdaa45808/Client_export_1592830934796-94f5d780-4007-4ae6-b802-53f4fe5509f2.xlsx"
const linkSource = "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet," + filePath;
        const downloadLink = document.createElement("a");
        downloadLink.href = linkSource;
        downloadLink.download = "ExcelTemplate" + this.datePipe.transform(new Date(), "yyyy-MM-dd") + ".xlsx";
        downloadLink.click();

I've even try to download the file path "xls" MIME type but still it throws same error.

Please let me know the ways to download the excel file.

Is there any difference to that question? https://stackoverflow.com/q/1066452/6548154 — A_A, Oct 01 '20 at 07:07
I've tried that solution also@A_A but it still throws me same error when I'm trying to open the downloaded excel file — Harika, Oct 01 '20 at 09:54
There are many solutions there, which have you tried? For instance `window.location = 'https://bviewstorage.blob.core.windows.net/9be306d9-acb1-4f25-a54f-5126e021ec6d/hrm/aabe5bd4-940a-4246-979c-581fdaa45808/Client_export_1592830934796-94f5d780-4007-4ae6-b802-53f4fe5509f2.xlsx'` worked for me on firefox — A_A, Oct 01 '20 at 10:01

score 0 · Answer 1 · answered Oct 01 '20 at 07:12

0

Add appenchild and it should work.

document.body.appendChild(downloadLink);
downloadLink.click();

For IE do it like this:

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  window.navigator.msSaveOrOpenBlob(url, filename);
}

answered Oct 01 '20 at 07:12

uiTeam324

1,215
15
34

Thank you for your response.I've tried as you said but it still shows the same error when I'm trying to open the downloaded file – Harika Oct 01 '20 at 09:52

score 0 · Answer 2 · answered Oct 01 '20 at 08:24

0

const filePath = "https://bviewstorage.blob.core.windows.net/9be306d9-acb1-4f25-a54f-5126e021ec6d/hrm/aabe5bd4-940a-4246-979c-581fdaa45808/Client_export_1592830934796-94f5d780-4007-4ae6-b802-53f4fe5509f2.xlsx"

if(window) {
  window.open(filePath);
}

As your file is not secure it can be download with the above code. window.open opens a new browser window which will download the file from blob directly.

answered Oct 01 '20 at 08:24

Surya Kavutarapu

136
9

Thank you for your response.If I've done something as you said then the downloaded file name is taken automatically from blob path but I want the downloaded file name to be custom(I need to provide the file name based on conditions) – Harika Oct 01 '20 at 09:51
Answer is simple the thing you were trying do is some how not possible. I have same requirement downloading a xlxs file form blob. I have searched for N no of solutions ended up with below link. https://stackoverflow.com/questions/41947735/custom-name-for-blob-url – Surya Kavutarapu Oct 01 '20 at 10:20
There is one way you can do it. You need help of a backend API which can provide you a blob. The Backend API should extract the file from blobURL and it should return you the blob content. The API should be POST and should have content type of application/x-www-form-urlencoded. – Surya Kavutarapu Oct 01 '20 at 10:28

score 0 · Answer 3 · answered Oct 01 '20 at 10:35

Extension to comment above solution

 submitForm(): void {
      this.myFormPost.nativeElement.submit();
  }

<form
  ngNoForm
  #myFormPost
  name="myFormPost"
  action="{{ backend API Here }}"
  method="POST"
  target="_blank"
>
  <input type="hidden" [name]="'token'" [value]="use this to pass token" />
</form>
<a
  href="javascript:void(0);"
  (click)="submitForm()"
  ><i class="fas fa-download" *ngIf="isDownload"></i>Download File</a
>

Angular Code to handle blob data download.

score 0 · Answer 4 · answered Oct 01 '20 at 10:38

function downloadFile(filePath) {
  var link = document.createElement('a');
  link.href = filePath;
  link.onclick = function() {
    document.body.innerText = "Downloading";
    setTimeout(function() {
      document.body.innerText = "";
    }, 2000);
  }
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}

downloadFile("https://bviewstorage.blob.core.windows.net/9be306d9-acb1-4f25-a54f-5126e021ec6d/hrm/aabe5bd4-940a-4246-979c-581fdaa45808/Client_export_1592830934796-94f5d780-4007-4ae6-b802-53f4fe5509f2.xlsx");

Download excel file in angular 7 using a blob url

4 Answers4