养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

使用a标签下载时对不同浏览器的兼容性

时间:2024-10-31 07:34:42

前端做文件下载时,有时后端是返回base64或者数据流。这个时候就需要用a标签的下载功能了,但是a标签的下载功能对不同的浏览器又要有不同的操作。下面我们来介绍一下怎么做。

方法/步骤

1、a标签下载常规做法:vara=document.createElement('a')//先创建a标签a.href=base//base是后端返回的数据·a.download='下载.jpg'//下载的图片名a.click();//开始下载这样做完发现在IE里没有反应,原因是IE不支持a标签的download属性,IE需要用到msSaveBlob方法

2、a标签下载兼容IE做法:vara=document.createElement('a')//先创建a标签a.href=blob//base是后端返回的数据·a.download='下载.jpg'//下载的图片名if(navigator.msSaveBlob){//兼容IEvarblob=Blob([blob],{type:'image/jpg'});returnnavigator.msSaveBlob(blob,'月报报表.jpg');}a.click();//开始下载

3、在火狐发现也是不能下载,原因是body里没有a标签,解决的方法就是把创建的a标签添邹菁惨挣加到body里兼容性所有浏览器的写法就是:vara=document.cr髫潋啜缅eateElement('a')//先创建a标签document.body.appendChild(a);a.style.display='none';a.href=blob//base是后端返回的数据·a.download='下载.jpg'//下载的图片名if(navigator.msSaveBlob){//兼容IEvarblob=Blob([blob],{type:'image/jpg'});returnnavigator.msSaveBlob(blob,'月报报表.jpg');}a.click();//开始下载

© 一点知识