CODEWITHSUNDEEP
javascriptangulartypescriptangular8
sun
sun

Reputation: 1972

how to trigger video file download in angular

I'm getting a video URL from my API. here I want to download that video by using that URL. I have a button called download. when I click on that button the video should start the download in my browser.

I have searched and found some solution like placing download attribute on a tag

<a href="{{selectedVideo.playbackUrl}}" download>Download</a>

it is redirecting to the other page but it does not start downloading the video.

can anyone please help with this?

Upvotes: 0

Views: 5309

Answers (1)

Ankit Prajapati
Ankit Prajapati

Reputation: 2820

Using ngx-filesaver we can achieve this. ngx-filesaver is angular package for filesaver.js and it is easy to use.

Find here this sample stackblitz demo

To use it in your application follow simple steps :

  1. npm install file-saver ngx-filesaver --save
  2. Import FileSaverModule in NgModule (It can be AppModule or any other module).
  3. Use below directive in template to download file 

<button type="button"
        fileSaver
        [method]="'GET'"
        [fileName]="'videoName.mp4'"
        [url]="'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'"
>Download Video</button>

Upvotes: 1

Related Questions