前端下载文件简易方法（兼容IE）

zlting~

已于 2023-06-09 13:43:39 修改

阅读量1.7k

点赞数 3

分类专栏： VUE JavaScript 文章标签： vue javascript

于 2020-02-13 13:32:02 首次发布

本文链接：https://blog.csdn.net/sunshineTing2/article/details/104294471

版权

VUE 同时被 2 个专栏收录

114 篇文章 15 订阅

订阅专栏

JavaScript

31 篇文章 1 订阅

订阅专栏

< a href=" " download="E726765">点我下载</ a>
在Chrome中可下载，而在IE中不行。
因为在IE 浏览器不支持download属性。在这里插入图片描述

通用方法

IE 浏览器：使用微软自带的msSaveBlob 方法，a标签的download属性不支持IE
谷歌浏览器：创建a标签，添加download属性，模拟鼠标点击事件
在这里插入图片描述

<div @click="download">下载链接</div>

download(){
			// '具体的URL'可以是接口请求得到的response数据流；
            let blob = new Blob(['具体的URL'], {type: 'application/json;charset=utf-8'});
            let href = window.URL.createObjectURL(blob); // 创建下载的链接
            if (window.navigator.msSaveBlob) {
              try {
                window.navigator.msSaveBlob(blob, '下载的文件命名')
              } catch (e) {
                console.log(e);
              }
            } else {
              // 谷歌浏览器 创建a标签 添加download属性下载
              let downloadElement = document.createElement('a');
              downloadElement.href = href;
              downloadElement.target = '_blank';
              downloadElement.download = 'model.json'; // 下载后文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); // 点击下载
              document.body.removeChild(downloadElement); // 下载完成移除元素
              window.URL.revokeObjectURL(href); // 释放掉blob对象
            }
          },

只需修改URL和文件名即可