常见的下载方式

一. 使用 window.open()

1. 使用场景

// 1. 先封装一个实现下载的函数
export const download = (path) => {
	window.open('下载的接口，例如：/fs/download?path' + path)
}
// 2. 使用：在需要下载的地方调用download函数，传入下载的url
download(path)

2. 可能出现的问题
   • 页面闪烁
   • 如果是嵌入在别的模块中可能无法下载
3. 解决办法：造成上述问题的原因都是window.open()默认打开一个新窗口

export const download = (path) => {
	window.location.href = '下载的接口，例如：/fs/download?path' + path //不闪屏
}

二. 使用 a 标签

1. a标签download下载

 <!-- href是下载资源的相对路径 -->
 <a href="./margin塌陷1.jpg" download target="_blank">点击我下载</a>

可以看到图片、markdown、word都可以正常下载

2. a标签 + fetch实现下载

// 封装download函数
export const download = (href, method = 'GET', data = null, newName = '') => {
  let params = {
    method,
    header: {'Content-Type': 'application/json;charset=utf-8' },
  }
  if(method == 'post' || method == 'POST'){
     params['body'] = JSON.stringify(data)
  }
  fetch(href, params).then(res => {
    res.blob().then(blob => {
      let a = document.createElement('a')
      document.body.appendChild(a)
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = newName ? newName : (res.headers.get('filename') ? decodeURI(res.headers.get('filename')) : 'file')
      a.click()
      window.URL.revokeObjectURL(url)
      a.remove()

      this.$message.success('下载成功！')
    })
  }).catch(() => {
    this.$message.error('下载失败！')
  })
}

// 引用下载
download('/fs/download?path=' + path, 'GET', null, filename)