js下载文件，点击的时候变成了打开预览

Leon4055

已于 2023-03-23 10:50:12 修改

阅读量3.2k

点赞数 3

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

于 2022-05-31 21:53:04 首次发布

本文链接：https://blog.csdn.net/weixin_41258075/article/details/125074002

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

当使用JS创建A标签下载文件时，如果遇到文件跨域，会导致预览而非下载。解决方法是通过fetch获取文件，转换为blob，再创建下载链接。在Vue项目中，可以封装一个downloadFile函数来实现跨域文件的下载。

摘要由CSDN通过智能技术生成

今天遇到一种情况用js 创建a标签实现下载，但是很奇怪，点击的时候变成了打开预览

	let a = document.createElement('a');
	a.setAttribute('href', fileUrl);
	a.setAttribute('download', 'filename');
	a.click();

问题是这种方式只能在 `同源`的场景适用，其实就说这个文件跨域了

同源 可以简单理解为 相同域名下的文件视为同源

解决方法

使用请求的方式下载文件然后转换为blob 文件，再做下载，就可以了

	// 图片地址
	let imgUrl = this.create_image;
	// 时间戳文件名
	let imgName = new Date().valueOf().toString();
	fetch(imgUrl).then(res => res.blob().then(blob => {
	    let a = document.createElement('a');
	    let url = window.URL.createObjectURL(blob);
	    a.href = url;
	    a.download = imgName;
	    a.click();
	    window.URL.revokeObjectURL(url);
	}))

Vue项目中的封装

// 文件下载
export const downloadFile = (fileUrl, fileName = new Date().valueOf().toString()) => {
  fetch(fileUrl).then(res =>
    res.blob().then(blob => {
      let a = document.createElement('a')
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = fileName
      a.click()
      window.URL.revokeObjectURL(url)
    })
  )
}