js 使用a标签下载文件或打开后台返回的下载链接

最新推荐文章于 2024-01-09 15:42:22 发布

wh20141212

最新推荐文章于 2024-01-09 15:42:22 发布

阅读量607

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/wh20141212/article/details/124607706

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种常见的JavaScript方法，通过创建隐藏的a标签并触发点击事件，实现在前端下载后端返回的服务器文件包。代码示例详细展示了如何设置下载名称、隐藏元素、指定下载地址，并确保下载完成后资源的释放。

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

难免遇见需要下载的文件功能，通常是后端返回放在服务器上的文件包路径

之前尝试过好几种方案，还是最常用的一种生效了，直接上代码吧

		downEvent(value,index){
            // 下载事件 正常使用
			//创建a标签
            const elink = document.createElement('a');
            // 设置下载名称
            elink.download = value.title + '.zip'
            //不在页面上展示a标签
            elink.style.display = "none"
            // 添加href属性  即下载的地址路径
            elink.href = value.href
            //在页面上添加此a标签
            document.body.appendChild(elink)
            // 触发点击事件
            elink.click()
            //下载完毕，告诉浏览器要使用URL.revokeObjectURL()方法释放之前创建的URL
            URL.revokeObjectURL(elink.href)
            // 移除添加的a标签
            document.body.removeChild(elink)
       },