download anchor tag opens file in a browser but not download it in React component

Question

I have this in my React component where I will click a download to download a file:

<a
  key={file.attachmentId} className="item uploaded"
  href={Pathes.Attachments.getById(file.attachmentId)}
  target="_blank"
  download
>
  Download
</a>

My path for the file:

static Attachments = class {
  static base = baseApi('attachments/download')
  static getById = (attachmentsId: any) => baseApi(`attachments/download/${attachmentsId}`)
}

In a result, file opens in browser but not downloading.

Answer 1

You could try setting the HTTP headers to the following:

Content-Disposition: attachment; filename="filename.[yourextention]"

It's quite common if this is a PDF, browser extensions want to read rather than download!

Hope this helps.