前台-a链接下载文件

codingFunTime

于 2023-02-22 15:54:24 发布

阅读量103

点赞数

分类专栏： key门户项目文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/hktkkkk/article/details/129164390

版权

key门户项目专栏收录该内容

37 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue.js应用中通过a标签实现文件下载。内容涵盖利用JavaScript的download属性、设置href以及处理跨域问题的方法，帮助前端开发者在不依赖后端的情况下完成文件下载需求。

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

	const downloadFile = (id: string, fileName?: string) => {
		orderDownload(id).then((res) => {
			if (res.code === '00000') {
				if (res.data[0].label.includes('permission deny')) {
					ElMessage.error('暂无下载权限')
				} else {
					// fileName文件名
					// id:文件id 通过接口获取 文件下载url，res.data[0].label为获取的url
					const x = new XMLHttpRequest()
					x.open('GET', res.data[0].label, true)
					x.responseType = 'blob'
					x.onload = () => {
						const url = window.URL.createObjectURL(x.response)
						const a = document.createElement('a')
						a.href = url
						a.download = fileName as string
						a.click()
					}
					x.send()
				}
			}
		})
	}