前端关于点击链接下载文件的解决办法

这阵子做了一个点击按钮下载文件的需求,一开始百度了好多办法都是用a标签,然后设置a标签的download属性,我也尝试着​​​​​​​做了一下,结果问题是:凡是浏览器能读取的文件都会在浏览器预览不会直接下载(比如jpg等图片格式的文件和txt文本文件),经过我一个下午的不断摸索,终于找到了一个办法能让这些文件点击链接就能直接下载,上代码!

downloadFile(link) {  //link是文件的下载链接
  let a_link = document.createElement('a')
  // 这里是将url转成blob地址,
  fetch(link).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
    a_link.href = URL.createObjectURL(blob)
    console.log(a_link.href)
    a_link.download = '' //下载的文件的名字
    document.body.appendChild(a_link)
    a_link.click()
  })
}

终于,头疼了一个下午的问题终于得到解决,感动。。。。

你可能感兴趣的:(前端,前端,javascript,vue)