background
During project development, there is often a need for image export, especially for applications with chart classes, which usually require downloading and exporting of charts.
It is relatively easy to download base64 images in new browsers such as chrome:
- Create a tag
- Assign the href attribute of the a tag to the base64 encoding of the image
- Specify the download attribute of the a tag as the name of the download file
- Triggering the click event of a tag
However, this logic cannot be done under IE, and writing this way will directly report an error.
Therefore, IE needs to process separately. Here, when processing this file, IE provides a separate method: (blob, download_filename) Calling this method can directly contact the IE download, which is quite convenient. The specific methods are as follows:
// Intercept the data content of base64 (remove the previous description information, a paragraph similar to this: data:image/png;base64,) and decode it into binary datavar bstr = atob((',')[1])
// Get the length of the decoded binary data, which is used to create a binary data container latervar n =
// Create an array of Uint8Array type to store binary datavar u8arr = new Uint8Array(n)
//Storing binary data into an array of type Uint8Arraywhile (n--) {
u8arr[n] = (n)
}
// Create blob objectvar blob = new Blob([u8arr])
// Call the browser method to start the IE download process(blob, 'chart-download' + '.' + 'png')
Overall implementation code
// Here is the obtained image base64 encoding. This is just an example. You have to encode the image by yourself to replace it here to test and see the effect. const imgUrl = 'data:image/png;base64,...'
// If the browser supports the msSaveOrOpenBlob method (that is, when using the IE browser), then call this method to download the image if () {
var bstr = atob((',')[1])
var n =
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = (n)
}
var blob = new Blob([u8arr])
(blob, 'chart-download' + '.' + 'png')
} else {
// Here we will follow the new version of browsers such as chrome const a = ('a')
= imgUrl
('download', 'chart-download')
()
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.