a标签下载兼容性

后端返回数据流或者base64时,前端需要转为图片下载,这个时候就要用到a标签

a标签下载常规做法:

    var a = document.createElement('a') // 先创建a标签

    a.href = base // base是后端返回的数据

·   a.download = '下载.jpg' // 下载的图片名

    a.click(); // 开始下载

这样做完发现在IE里没有反应,原因是IE不支持a标签的download 属性,IE需要用到msSaveBlob方法

a标签下载兼容IE做法:

    var a = document.createElement('a') // 先创建a标签

    a.href = blob // base是后端返回的数据

·   a.download = '下载.jpg' // 下载的图片名

    if (navigator.msSaveBlob) {

        // 兼容IE

        var blob = Blob([blob], { type: 'image/jpg'}); 

        return navigator.msSaveBlob(blob, '月报报表.jpg');

      }

    a.click(); // 开始下载

在火狐发现也是不能下载,原因是body里没有a标签,解决的方法就是把创建的a标签添加到body里

兼容性所有浏览器的写法就是:

    var a = document.createElement('a') // 先创建a标签

    document.body.appendChild(a);

      a.style.display='none';

    a.href = blob // base是后端返回的数据

·   a.download = '下载.jpg' // 下载的图片名

    if (navigator.msSaveBlob) {

            // 兼容IE

            var blob = Blob([blob], { type: 'image/jpg'}); 

            return navigator.msSaveBlob(blob, '月报报表.jpg');

      }

    a.click(); // 开始下载

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • simplify the life HTML5 File API — 让前端操作文件变的可能 前言 在 HTML5...
    我是强强阅读 3,361评论 0 1
  • 人类所能感受到的最强大的力量应该就是大自然的力量,因为自然中拥有各种生命,拥有可以孕育生命、滋养生命、甚至是结束生...
    爱风的红月亮阅读 703评论 0 1
  • 今天是儿子班级元旦联欢会,早晨儿子把他要带的零食收了一袋子,“妈妈,这些都给我带着啊。”“收拾收拾,赶紧上学。”我...
    刘璐_83ba阅读 247评论 0 4
  • 夕阳穿过石榴树琐碎的叶子,把影子投射在嘈杂的庭院里。 十月末的天气,天说黑就黑了。院子黑下来,没有人陪我说话,只有...
    丁冬笔记阅读 530评论 0 0
  • 春水迢迢山外山,花眠更漏断,玉阶寒。孑然顾影倚栏杆,萧声尽,翘盼故人船。 风起叶低喃,欲闻青鸟语,恐心怜。绕廊挥袂...
    秋月姑娘阅读 334评论 5 13