cannot download image from URL react

问题

in my react app i am trying to download an image from an S3 URL using following code.

<a href={ele.payment_receipt} download target="_blank" class="text-link-3 fw-3 ">
                        <i class="icon-download mr-2"></i>Download</a>

where ele.payment_receipt is the link of file. but when i click on the link it opens it new tab instead of downloading it. I have tried online solutions but all online solutions tell the same method to download can anyone tell me what i am doing wrong here? thanks in advance

EDIT URL of the image is the SignedUrl of an s3 bucket image which expires after 60 seconds.

回答1:

For your information, Firefox and Chrome 65+ only support same-origin download links, probably as a security measure.

The Web Hypertext Application Technology Working Group (WHATWG) also recommends that the web server that is hosting the image/file in question needs to send a Content-Disposition HTTP header for download= to be honored.

In short:

You can only use to force download of an image/file, if:

the server that hosts the image/file also says it should be downloaded, or the image/file comes from the same domain.

Please check whether from the server Content-Disposition header is coming from the server or not. Hope this helps.

回答2:

You cannot use download attribute to download files which are in different URL(cross-origin) for more information you can refer

Instead what you can do is, make an API call, convert it to blob and download it. You can refer this how to do that gist and working-codesandbox-sample.

回答3:

A simple component to download data from a client-side cache (e.g. flux, redux).

Design to be used with browserify or webpack.

Install with:

npm i react-download-link

import DownloadLink from "react-download-link";

<DownloadLink
    label="Save"
    filename="myfile.txt"
    exportFile={() => "My cached data"}
/>

来源：https://stackoverflow.com/questions/59624685/cannot-download-image-from-url-react

标签

javascript

reactjs

download