js通过文件的url下载文件到本地

最新推荐文章于 2024-09-20 11:20:15 发布

土豆程序媛

最新推荐文章于 2024-09-20 11:20:15 发布

阅读量963

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_33235680/article/details/124172789

版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了三种不同的前端文件下载方法：iframe、window.open和fetch结合a标签。其中，iframe方式可能造成用户体验不佳，window.open会打开新页面，而fetch方法能提供更好的下载体验。文章通过代码示例详细解释了fetch如何将链接内容转换为blob并触发下载，同时提供了相关资源链接供进一步学习。

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

1、iframe

function download(url){
    var iframe = document.createElement("iframe")
    iframe.style.display = "none";
    iframe.src = url;
    document.body.appendChild(iframe);
}

2、会打开空白页面，下载文件后自动给关闭，用户体验不好

window.open(url)

3、

fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
	  const a = document.createElement('a')
	  a.href = URL.createObjectURL(blob)
	  //测试链接console.log(a.href)
	  a.download = 'fileName'  // 下载文件的名字
	  document.body.appendChild(a)
	  a.click()
})

可参考链接：
1、https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/
2、https://yugasun.com/post/optimize-download-files-in-frontend.html
3、https://www.cnblogs.com/qingheshiguang/p/15806850.html