[html] 浅析 HTML5 中的 download 属性

david2tdw commented 5 years ago

download 属性

如果只想下载文件而不是跳转预览，最好的方式是在标签中添加download属性，就能很简单地实现下载操作。

<a href="result.png" download>download</a>

动态资源下载

function download(href, filename='')  {
  const a = document.createElement('a')
  a.download = filename
  a.href = href
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

需要注意的是，代码中对创建的进行的 appendChild 和 remove 操作主要是为了兼容 FireFox 浏览器. 注意： download属性目前仅适用于同源 URL，即如果需要下载的资源地址是跨域的，download属性就会失效，点击链接会变成导航预览。

通过返回Blob下载

const downloadText = (text, filename = '') {
  const a = document.createElement('a')
  a.download = filename
  const blob = new Blob([text], {type: 'text/plain'})  
  // text指需要下载的文本或字符串内容
  a.href = window.URL.createObjectURL(blob) 
  // 会生成一个类似blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
  document.body.appendChild(a)  
  a.click()
  a.remove()
}

david2tdw commented 5 years ago

httpDownload('get', `/xxxxx`).then(res => {
        let url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)

        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)
      }).catch(error => {
        console.log(error)
      })

david2tdw / blog

[html] 浅析 HTML5 中的 download 属性 #72