IE下载保存base64文件

如果一个超链接的链接地址是一个base64的代码,如下:

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABJdJREFUeNrsV2toXEUYPXPvPtPsJpuNTdo0zTsGrbam1oBWJFVjJUrTai1YKMZCMaItKFL1R1GhBEpJQXyiECgqiELFEgmijamgBolpkiZtHrt5tzHJJpvd7PPeu+M3txtN2sZsodgfZuDjDnfmO+fM95i7yzjnuJVDwi0eKwJWBKwIYInsefXzzDxrinaYM7WMydrGGNdgNaZAkhwIRtwEYrqkRU11tTsmT9D+2M0SIL15KnOfwRr5yGgwm0uzDiDX+TiKnVkwSNmLNg75L6F7/Bj+GP0UAV/Sa7VVk3WJCrmugGffcqbmb2E/25PSNjxc/A5K1+7BrAqMhgDvbCXG0ICoqsEsc3CCKLTJKEgGTFIAjb3PoNX12zdHn5jeTVDqjQpgL32yOj81O9JflvMcthUdx0TUgLapGFwBDTIzwhFmmLXS9c0jtF3TnWIEo3EJmxxmPHAb8PvYC2ju/Pr4kUrP639vSkAAq/kwoyAtL9T31F11uGftfoz6gZkwINOiTOUq0e6fBhjK8zliCwLM46bRO6sJyE8Bvui6G3s3dFJcEPg3AYYFc5OjSOnbWXIChZnP48wUdBJBKhG5zK6IUOndBM1j10keJ6UaBT04B+Taq/D2D0NzikqKNLlJU/nJ2h0TJ6+ujXkYY7sDw+5zb2RWrj+My3ONYFzVe1SJBdEz2YALE6dhkJNIkAUxCj/XU0AATCaQKzCiOxilqdBZgdKsGr0EGDMgqgXQOvotmi/Wtx3aGh7OSTc/PV8fwlNuuy/9mGMu8IqlqxVT3u8wNtsABT590cgcWJe8HWElhGbXexQFI5Fr2F78Ps7/+RnGfC1EIkF81rVYFA8VvAyL0YrRue+hcK8uzkTtmpX8CKYD48i011BB546XOuX14nyCY5Wvotjje7DI3FOzBh29DejpiyISvXIqC0WwpMiCjdnb4PH7MOhpJUJGhDH9KcgFSYzyleMshdNmR/vIGVzsCyMcxQIME+7IKsPtGUdgNG9Ciydwuio9eZeoAcvgFot58EAaensb0d0hQep6DJLXqTsrqR50hM4ipjXhznXlUDVGNSFIxanng8j1ArRZ7WgbbML5LnrbVbEIoz3UDEX7BY6UX7H50Z0odQ0+SUtWIUD+qsKLkpkLGHBpRF5ORXgvCrbm6M6u/iH0E2B/UhMy07qJSJz+mu6l/DN4gt3oH6C8L4HhTvoRGekf49RRBcxAGbh/2CzqjKsefm7WP4OoCJk3HQWFOVDUiG5iDjpJ1L8K/sg0uAg/8V9rDN4QYShLYyh+G4JhP6yaEdExflYoFxGI1O4a2f9uS06rzcbhYxRLxv/pDzGXOGyr56iazRjqkfS2XHSDcNGyDCmbVdjsy2CoZrg6ma/+4MghWgkLAUGyywfLhsro6di3N/KB2+3Ozy/I033dLjc5Rdx1u8dfTORqFXfLMhgiRj7BSRaa12gS3UBmJ1tTXV39pcEgkkSMqjpcX1+/Z94hAQHWBDCi8RtSubqajGSidLPiYhBXO0bmiatfbtwQBlsCICkeFcTVBhMkv5kY/9EvopV/RisC/vcC/hJgABG9CR0EnLuyAAAAAElFTkSuQmCC" download="picture-test.png">下载</a>

页面中的效果显示如下:

下载

在Chrome等现代浏览器当中,点击下载会直接保存图片。但是在IE当中无效,因为IE不支持直接保存base64文件。那IE如何解决这个问题呢?

在IE当中可以使用 msToBlob() 方法转换成 blob 文件,然后用 msSaveBlob() 方法来保存。

var blobObj = new Blob( [ $('a').attr('href') ] );
// 或者直接将 canvas 文件转成 blob,var blobObj = canvas.msToBlob();
navigator.msSaveBlob(blobObj, 'picture-test.png');

官方参考:https://technet.microsoft.com/ZH-CN/Library/hh779016.aspx

HTML5文件保存相关库:https://github.com/eligrey/FileSaver.js

您的赞助将会支持作者创作及本站运维

评论

共2条
  1. 姚欣华 2018-09-13 19:19

    你好,我使用ie下载该base64图片之后,无法直接查看,只能使用记事本打开该图片将里面的base64字符串贴到网页面的base64解码器上进行解码才能看到图片,这个该怎么处理呢?

  2. mukti 2018-10-11 16:13

    抱歉,我没有遇到这个问题。
    提供一个思路,你想保存的图片其实是保存了文本,应该是文件格式的问题,应该在保存的时候保存成 image/png,所以是不是 contentType 的问题?

发表评论


TOP