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

今天遇到一种情况用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)
    })
  )
}