javascript front-end implementation base64 Pictures Download (compatible with IE10 +, chrome, firefox)

 Is not incompatible ie, is not compatible with ff, spent a lot of time thanks to the original author.

background

In the project development process, there is often a picture of export demand, especially for applications with charts and the like, often need to export the chart to download.

Download achieve base64 picture in chrome and other modern browsers is relatively easy:

1. Create a label a
2. The href attribute of a tag assigned to pictures of base64 encoding
3. Specify the download property of a label, as the name of the downloaded file
4. Trigger a click event tag

But this logic does not work in IE, wrote directly error.

So the next IE needs to be dealt with separately, here IE when dealing with such documents to provide a single method: window.navigator.msSaveOrOpenBlob (blob, download_filename) call this method can directly trigger the download of IE, it is quite easy. Specifically, the following:

// base64 intercept the data content (minus the foregoing description, like this section: data: image / png; base64,) and decoded into binary data
var BSTR = cell (imgUrl.split ( ',') [1]) 
// Get the length of the decoded binary data, the binary data to create a container for subsequent
var n = bstr.length 
// Create a Uint8Array type of array to store binary data
var u8arr = new Uint8Array(n) 
// binary data stored in an array of type Uint8Array
while (n--) {
 u8arr[n] = bstr.charCodeAt(n) 
}
// Create the blob
var blob = new Blob([u8arr])
// invoke the browser method, invoking IE's download process
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')

　　// code here is to get the whole picture to base64 encoding, here is an example of Kazakhstan, to be encoded image replacement here to test yourself to see the effect const imgUrl = 'data: image / png; base64, ...'

// if the browser supports msSaveOrOpenBlob method (that is, when using IE browser), then call the method to download images
if (window.navigator.msSaveOrOpenBlob) {
 var BSTR = cell (imgUrl.split ( ',') [1])
 var n = bstr.length
 var u8arr = new Uint8Array(n)
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
 }
 var blob = new Blob([u8arr])
 window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
} else {
 // here in accordance with chrome and other modern browsers to handle 
 const a = document.createElement('a')
 a.href = URL.createObjectURL(blob);//imgUrl
 a.setAttribute('download', 'chart-download') 
//a.click() 

 a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐 
}

 Is not incompatible ie, is not compatible with ff, spent a lot of time thanks to the original author.

<img name="pic1" />
        <input type="button" value="下载" onclick="download('img1')">
    <script>
        was right = "/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJ
C4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL / 
wAARCAB + AGYDASIAAhEBAxEB / 8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL / 8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0K 
xwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDx 
MXGx8jJytLT1NXW19jZ2uHi4 Tl5ufo6erx8vP09fb3 + + Pn6 / 8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL / 8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBU 
QdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqK
mqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD36iiigAooryj4k/Fo+HLmTSNFjSXUFAMk7EMkee2Ac7v8QfagTdj1Ka5t7
fHnzxRZ6b3C5/Ouf1zx/wCGPDyn7fq8AkAB8qJvMcg9wo5r5K1TWdR1Wdpr+8nuZCS2ZXJxnrgdAPYUzS4BcXDJIPl2MR9cUrk8x77e/tA6HBftHbafd3NqpA80AKT9Aa7XRfiR";
          document.all['pic1'].src = "data:image/jpg;base64," + ret;  
// download pictures
        function download(){
                let imgData = "data:image/jpg;base64," + ret;  
                this.downloadFile('测试.png', imgData);
            }
      //download
     function downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);

        let evt = document.createEvent("HTMLEvents");
        evt.initEvent ( "click", true, true); two parameters in the FF will complain after // initEvent without the type of event, whether bubbling, whether to prevent the browser's default behavior
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);

        // aLink.dispatchEvent(evt);
        aLink.click()
      }
      // base64 turn blob
      function base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      }
    </script>

　　

References

https://www.jb51.net/article/147431.htm

https://www.bbsmax.com/A/q4zVb7OlzK/

https://www.cnblogs.com/MR-cui/p/9996548.html