vue项目通过a标签下载图片download不生效

通过a标签下载网络图片有两种方式：

• download方法，名字不生效
• 使用流的方式下载，名字生效

download方法

/**
 * 
 * @param {*} href 图片的网络地址(url)
 * @param {*} name 下载图片后显示的名字
 */
export function download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href + '?response-content-type=application/octet-stream'
  eleLink.click()
  eleLink.remove()
}

download(url, '图片测试.png')

此方法是修改download属性不生效。

使用流的方式下载

因为是vue项目，可直接使用axios方式请求图片，实现流的方式下载网络图片

// url为网络图片地址
axios.get(url, {
  responseType: 'blob',
  withCredentials: false,
}).then((e) => {
  console.log(e)
  const href = URL.createObjectURL(e.data)
  const aLink = document.createElement('a')
  aLink.style.display = 'none'
  aLink.href = href
  aLink.download = '图片测试.png'
  aLink.click()
  URL.revokeObjectURL(url)
})

接口返回的数据如下：

注意：

url是图片的网络地址 请求涉及跨域，vue项目可在vue.config.js中配置proxy解决跨域问题