JavaScript 中实现下载功能

jia_jia520

于 2021-09-27 20:33:19 发布

阅读量1.2k

点赞数

分类专栏：下载 js 文章标签： javascript html

本文链接：https://blog.csdn.net/jia_jia520/article/details/120516593

版权

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

下载

1 篇文章

订阅专栏

本文介绍了两种使用JavaScript实现文件下载的方法：一是通过后端提供的URL直接下载；二是接收后端返回的文件流，特别是遇到乱码问题时，需设置响应类型为'blob'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、地址下载
后端返回一个url

var url = 'http://123.com'
let link = document.createElement('a');
link.href= url;
link.click();
window.URL.revokeObjectURL(link);

二、后端返回文件流

//对于错误信息的提示
 if(res.data.type=== 'application/json'){
    const reader = new FileReader();
    reader.readAsText(res.data, 'utf-8');
    reader.onload = () => {
       let errMsg = JSON.parse(reader.result).msg
          this.$message.error(errMsg)
        };
     }else{
     	let responseFileName = decodeURI(
	     res.headers["content-disposition"].slice(21)
		);//获取文件名称
		 //文件流
		 let url = window.URL.createObjectURL(new Blob([res.data]));
		 let link = document.createElement("a");
		 link.style.display = "none";
		 link.href = url;
		 link.setAttribute("download", responseFileName);
		 document.body.appendChild(link);
		 link.click();
		 document.body.removeChild(link);
		 this.$message.success("下载成功");
     }