Make the download window appear automatically when downloading a file

Question

Make the download window appear automatically when downloading a file

How can I use JavaScript/TypeScript to prompt the browser to open the download window? My goal is to give users the ability to rename the file and select the download folder, as most downloads are saved directly in the default location.

This is how I currently enable the download:

    const json = JSON.stringify(data);
    const blob = new Blob([json], {type: 'application/json'});
    const url = URL.createObjectURL(blob);

    const a = document.getElementById('export');
    a.download = 'export.json';
    a.href = url;

javascript typescript

Answer 1

Answer №1

For more details, check out the complete blog post: Download File in Angular Js2 Application

You might be missing these two lines in your code:

var url= window.URL.createObjectURL(b);//add this line 
window.open(url);//add this line for download

I recommend trying it like this:

  constructor(private http:Http)
  {}

  DownloadFile():void
  {
    this.getFile("http://localhost:1800/api/demo/GetTestFile")
    .subscribe(fileData => 
      {
      let b:any = new Blob([fileData], { type: 'application/zip' });
      var url= window.URL.createObjectURL(b);//add this line 
        window.open(url);//add this line for download 
      }
    );
  }

  public getFile(path: string):Observable<any>{
    let options = new RequestOptions({responseType: ResponseContentType.Blob});
    return this.http.get(path, options)
        .map((response: Response) => <Blob>response.blob())  ;
  }

You can find a similar solution provided by me here: Angular JS empty pdf in new window

Answer 2

For more details, check out the complete blog post: Download File in Angular Js2 Application

You might be missing these two lines in your code:

var url= window.URL.createObjectURL(b);//add this line 
window.open(url);//add this line for download

I recommend trying it like this:

  constructor(private http:Http)
  {}

  DownloadFile():void
  {
    this.getFile("http://localhost:1800/api/demo/GetTestFile")
    .subscribe(fileData => 
      {
      let b:any = new Blob([fileData], { type: 'application/zip' });
      var url= window.URL.createObjectURL(b);//add this line 
        window.open(url);//add this line for download 
      }
    );
  }

  public getFile(path: string):Observable<any>{
    let options = new RequestOptions({responseType: ResponseContentType.Blob});
    return this.http.get(path, options)
        .map((response: Response) => <Blob>response.blob())  ;
  }

You can find a similar solution provided by me here: Angular JS empty pdf in new window

Make the download window appear automatically when downloading a file

Answer №1

Similar questions

Angular6 table using *ngFor directive to display objects within an object

Using JavaScript drag and drop feature to remove the dragged element after a successful drop operation

Using the Google Chrome console, execute a command on each page within a specified website

Receiving an empty string from Chrome FileReader when dealing with large files (300MB or more)

Unable to interact with the page while executing printing functionality in

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

What steps can I take to ensure that AstroJS components do not conceal SVG elements when the SVG is incorporated into another file with client:load?

Showing dynamic icons in Angular 2 applications

How can I implement pagination using jQuery?

Vue.js: The chart's dataset has been refreshed

An error in typescript involving a "const" assertion and a string array

How can I transfer form data to a PHP variable using an AJAX request?

Booking.com's embedded content is experiencing display issues

Lending a hand in deselecting a rule within the jcf-hidden add-on using Selenium

Ways to verify if an array contains two identical object values?

Can you explain the functionality of this Angular JS code snippet?

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

The promise chain from the ngbModal.open function is being bypassed

Executing an onscroll function based on window.innerWidth in JavaScript

Error message: Cannot establish the attribute 'next' on the string '/:id'