I get an image in base64 format from the database and I would like to allow the user to download the image. What is the best way to do it?
Add a comment
|
4 Answers
Considering you tagged this question as an Angular question, I suppose that for some reason, you dont want to expose an endpoint that serves the image in raw format, then create a link to it.
If you're looking for an Angular specific solution, there is none. However, there is a pure javascript solution described below. It can be used to preload your image so your user will be able to get the image instantly when needed.
let byteCharacters = atob('your base64 data');
let byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
let byteArray = new Uint8Array(byteNumbers);
let blob = new Blob([byteArray], {"type": "image/jpeg"});
if(navigator.msSaveBlob){
let filename = 'picture';
navigator.msSaveBlob(blob, filename);
} else {
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.setAttribute('visibility','hidden');
link.download = 'picture';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
You can test here : https://jsfiddle.net/pxm0eyzs/2/
1 Comment
achref akrouti
you can see responseType: ResponseContentType.Blob of typescipt ,may help you
Here is a complete solution to create file from blob stream:
private base64ToFile(base64Data, tempfilename, contentType) {
contentType = contentType || '';
const sliceSize = 1024;
const byteCharacters = atob(base64Data);
const bytesLength = byteCharacters.length;
const slicesCount = Math.ceil(bytesLength / sliceSize);
const byteArrays = new Array(slicesCount);
for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
const begin = sliceIndex * sliceSize;
const end = Math.min(begin + sliceSize, bytesLength);
const bytes = new Array(end - begin);
for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new File(byteArrays, tempfilename, {type: contentType});
}
For direct downloading, I use File-Saver library:
installation :
npm install file-saver --save
import section :
import * as FileSaver from 'file-saver';
on download function :
const myFile = this.base64ToFile(stream, documentName, contentType);
FileSaver.saveAs(myFile, document.name);
Comments
try with this code it works`
download(row) {
return this.Http
.get(file_path , {
responseType: ResponseContentType.Blob,
})
.map(res => {
return {
filename: row.name,
data: res.blob()
};
})
.subscribe(res => {
let url = window.URL.createObjectURL(res.data);
let a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display: none');
a.href = url;
a.download = res.filename;
a.click();
window.URL.revokeObjectURL(url);
a.remove();
});
}
`
Comments
On the service file
downloadimage(imagePath) {
return this.http
.get(
imagePath,
{
responseType: "blob"
}
)
.pipe(
map(res => {
return {
filename: row.name,
data: res
};
})
);
}
}
on the ts file subscribe downloadImage() from service file
downloadimage(path).subscribe(res => {
let url = window.URL.createObjectURL(res.data);
let a = document.createElement("a");
document.body.appendChild(a);
a.setAttribute("style", "display: none");
a.href = url;
a.download = "test.png";
a.click();
window.URL.revokeObjectURL(url);
a.remove();
});
