js 下载文件

最新推荐文章于 2024-07-18 23:42:29 发布

向右看齐--

最新推荐文章于 2024-07-18 23:42:29 发布

阅读量480

点赞数

分类专栏： js vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_39461487/article/details/132341094

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

前端下载文件方法很多,url是文件地址

方法1：打开一个新的页面

window.open(url);

方法2：直接弹出下载窗口，但是当下载文件是txt格式时，浏览器会自动打开

handleDownload(row, index) {
	const link = document.createElement('a')
	link.target = '_blank'
	link.href = process.env.VUE_APP_IMG_DOMAIN + '/' + row.task_url
	const new_file_name = this.getDownLoadFileName(row, link.href)
	link.setAttribute('download', new_file_name)
	document.body.appendChild(link)
	link.click()
	document.body.removeChild(link)
	window.URL.revokeObjectURL(row.task_url)
}

getDownLoadFileName(row, url) {
  // 获取url后缀名
  const ext =  filename.split('.').pop()
  // 新的文件名：任务名(任务id)_用户id_用户任务id.ext
  let time = new Date().toLocaleDateString();
  return row.book_name + time + ext
}

方法3：下载文件并保存到本地

handleDownload(row, index) {
	const x = new window.XMLHttpRequest()
	const url = process.env.VUE_APP_IMG_DOMAIN + '/' + row.task_url
	const filename = this.getDownLoadFileName(row, url)
	x.open('GET', url, true)
	x.responseType = 'blob'
	x.onload = () => {
	  const url = window.URL.createObjectURL(x.response)
	  const a = document.createElement('a')
	  a.href = url
	  a.download = filename
	  a.click()
	}
	x.send()
}