<a>标签下载问题

天下熙熙
  • 430

我想实现下载功能,但是遇到了很多问题。
正常的下载,在当页点击下载按钮就直接下载了,根本没有跳转/位置确认之类的(多此一举)。
image.png

我在百度找了很多答案,有的说文件名有中文,有的说是因为谷歌浏览器里面 <a> 标签会默认跳转。
但我看了我的文件名是英文,换成360浏览器也是一样的效果。

image.png
上面那种动态绑定 href 的地址 就会跳转到新的页面,但跳转了也只是播放并没有下载。
下面那种写死的超链接,可以下载,但是显示的下载失败。
image.png

有个特殊情况是:

加了冒号就是动态的,大多数是无法当页下载,但是特别奇怪某些数据可以当页下载,是不是文件的问题?

还有就是:我是在前端调试,我的页面本地端口是8080,但是点击之后跳转到了后端,ip都变了。后端的端口是8081是不是跨域导致的呢?

回复
阅读 1.5k
5 个回答

我给你调整了一下问题排版,有点看的着急...

首先第一个,你的W3School里的demo,为什么会弹窗,我给你一个配置截图你就明白了。
image.png

然后是第二个问题点击保存按钮有一些文件会直接在新标签页打开,有一些可以保存。这个问题我大概描述一下场景:

  1. 一般的文件可以直接使用链接进行下载,如.zip之类的浏览器不能打开的格式;
  2. 图片、pdf等可以直接打开的文件只会预览,不会直接下载。

第一个场景肯定是没问题,主要是第二个,如果想解决的话,你需要使用 域名开头的地址
例如 <a href="http://www.baidu.com/1.pdf" download="保存的PDF文档名称">下载PDF</a>
image.png

希望可以解决你的问题

为什么a里面要套button,这不符合h5规范

现在通过a标签确实是大部分实现下载的方式。因为a标签支持一些比如图片、txt文件、pdf这些在手机上上是可以直接显示的。很方便。但是在PC有部分的兼容,很头疼。一般都是添加download属性 然后只想click下载的。但是这个download是有兼容性的。你可以查一下

      let blob = new Blob([res.data]) //res.data 后台返回的文件流
      let fileName = `xxx.txt` // 定义文件名  
      let urlObject = window.URL || window.webkitURL || window
      let objectUrl = urlObject.createObjectURL(blob) //生成一个url
      if ('download' in document.createElement('a')) {
        // 非IE下载
        let el = document.createElement('a')
        //链接赋值
        el.href = objectUrl
        el.download = fileName
        //必须点击否则不会下载
        el.click()
        //移除链接释放资源
        urlObject.revokeObjectURL(objectUrl)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }

在浏览器中,支持的部分元素类型(txt、jpg等等)大多数情况下即使是a标签下也只能单独打开,而不是下载(浏览器特性设置,其实这时文件已经下载了,不过没有单独保存到需要的位置),需要在打开的页面中另存实现真正的下载存储。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏