How to download a base64-encoded image?

前端未结

关注

 10  809

I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?

相关标签:

10条回答

梦谈多话

2020-11-29 08:28

In my Angular App, I am getting the base 64 files from server.

In Html:-

<button type="button" (click)="downloadFile(fileName,base64data,fileType)"></button>

In Ts:-

  downloadFile(fileName:string,data: any,fileFormat:string): void {
    const linkSource = 'data:'+fileFormat+';base64'+data;
    const downloadLink = document.createElement("a");
    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

0 讨论(0)

伪装坚强ぢ

2020-11-29 08:34

You can try this :

    <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Download Text File DataURL Demo</title>
        <style>
            body{ font: menu; }
        </style>
        <script src='//js.zapjs.com/js/download.js'></script>
    </head>
    <body>
        <h1>Download Text File DataURL Demo</h1>
        <main></main>
        <script>
            download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
        </script>
    </body>

</html>

download tag downloads the image using the script included.

For reference you can try this URL : http://danml.com/download.html

0 讨论(0)

情歌与酒

2020-11-29 08:37
At first: This question is extremly browser dependent! I tried many, so I came up to answer this question that way:

You should put the base64-Data inside the src-Tag of an IMG-Element: How to display Base64 images in HTML? Then you can right click the Image and click "Save Image..." (or similar) in these browsers:
- Chrome 79
- Edge 44
- Firefox 71
- IE 11
- Safari 13
Also on Android with Chrome and Firefox. Biggest file working was 23 MB PNG-File in IE 11 and Safari 13. But Firefox and Chrome did also work for 86 MB JPEG.
0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2020-11-29 08:39
If you want to download it using JavaScript (without any back-end) use:
```
window.location.href = 'data:application/octet-stream;base64,' + img;
```
where img is your base64 encoded image.

If you want to allow the user to specify a file name, use the download attribute of the a tag:
```
<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
```
- Notice: The download attribute is not widely supported.
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-11-29 08:39
In my React App, I was getting the base 64 images from an API, I stored it in a global prop and downloaded it with the help of <a> tag.
```
<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

礼貌的吻别

2020-11-29 08:42

    var a = document.createElement("a"); //Create <a>
    a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here
    a.download = "Image.png"; //File name Here
    a.click(); //Downloaded file

0 讨论(0)

1 2 下一页