<a>标签下载问题

Question

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

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

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

有个特殊情况是：

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

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

Answer 1

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

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

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

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

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

希望可以解决你的问题

Answer 2

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

Answer 3

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

Answer 4

      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)
      }

Answer 5

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