@author Ken @time 2020-09-24 22:00:55 @description 转载请备注出处，谢谢

bug 回忆录（一）

大家好，我是 Ken，人贱人爱的前端小 Ken，我的公众号是 前端小Ken，今天我要告诉你一个严重的问题，我发现这个奇怪的 bug，内心一万个草泥马在空中飘过，顿时心里害怕，菊花一紧：

最后我还是怂了，不得不好好认真的对待 bug。

原因如下

那么 bug 是缘起何因呢？请听我慢慢道来：

情况是这样的，我向后台发送一个请求，后台给我返回一个下载压缩包的 id，假如我们的请求代码如下：

XM.ajax.post(this.url, params).then(res => {
  // 其中 res.data.data 就是后端返回的 id
  console.log(res.data.data)
  // 我们需要在这里处理到处的功能
  // 拼接下载压缩包链接
  let downloadUrl = this.$_getEnv('xdeploy').baseUrl + this.downloadUrl + res.data.data
  this.downFile(downloadUrl);
}).catch(err => {
  this.$message.error(err.msg)
  console.error(err)
})

// vue 语法

methods: {
  downFile(downloadUrl) {
    var aEle = document.createElement("a");// 创建 a 标签
    aEle.download = fileName;// 设置下载文件的文件名
    aEle.href = downloadUrl;// downloadUrl 为后台返回的下载地址
    aEle.style.display = "none" // 隐藏元素
    document.body.appendChild(aEle)
    aEle.click();// 设置点击事件
    document.body.removeChild(aEle)
  }
}

结果我在调试的过程中，发现控制台产生了一个警告：

这里需要注意的是：在我的页面中是用的get方法去请求导出接口。

妈耶，我怂了，你先上

好了 bug，就重现到这里，接下来我们先来好好研究下如何进行下载。

如何下载

下载，得从我们最普通的 a 标签说起，a 标签是 html 一个基本元素，在 MDN 文档中是如下定义：「（或称锚元素）可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。」

先来看几个比较简单的例子：

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

运行结果如下：

a 标签最主要的特性就是 href。它有三个作用：

阻止链接跳转

<a href="javascript:void(0)"></a>

跳转链接

<a href="xxx.com">xxx.com</a>

实现锚点定位

<a href="#top"></a>

最最重要的一个属性，H5 特有的属性：download 属性。通常我们网站上面一些点击下载啊，就是利用这个属性和 href 属性来做到下载功能的。

此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。注意: 此属性仅适用于同源 URL。尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。如果 HTTP 头属性 Content-Disposition 被设置为inline（即 Content-Disposition='inline'），那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性。

太长了，说白了就是可以使用这个属性来实现文件，压缩包，excel 导出，下载功能

最最恶心的还是兼容新问题：

a 标签，实现下载功能

创建 a 标签
设置下载文件的文件名，说白了就是设置 download 属性
设置下载地址 href
触发点击事件

downLoad(content,fileName){
  var aEle = document.createElement("a");// 创建a标签
  // blob = new Blob([content]); 
  aEle.download = fileName;// 设置下载文件的文件名
  //aEle.href = URL.createObjectUrl(blob);
  aEle.href = content;// content为后台返回的下载地址
  aEle.click();// 设置点击事件

}
let URL ='XXXX' //下载地址
downLoad(URL ,'test.xlxs')

content 非下载地址，而是下载的内容

在上面的基础上做修改，将内容转成 blob 对象，使用 URL.createObjectUrl(blob) 转成下载链接，设置到 href 属性上，再触发 click() 方法。

downLoad(content,fileName){
  var aEle = document.createElement("a");// 创建a标签
  blob = new Blob([content]); 
  aEle.download = fileName;// 设置下载文件的文件名
  aEle.href = URL.createObjectUrl(blob);
  aEle.click();// 设置点击事件

}
downLoad('下载内容123123','test.txt')

通过H5 的 download方法

downFile(content, filename) {
  var ele = document.createElement('a');// 创建下载链接
  ele.download = filename;//设置下载的名称
  ele.style.display = 'none';// 隐藏的可下载链接
  // 字符内容转变成blob地址
  var blob = new Blob([content]);
  ele.href = URL.createObjectURL(blob);
  // 绑定点击时间
  document.body.appendChild(ele);
  ele.click();
  // 然后移除
  document.body.removeChild(ele);
};

以上三个方法，在工作中碰到的话，可以直接稍作修改，拿去使用。

如何解决 bug

好了，上面的牛逼也吹完了，该解决 bug 的时候了，我一顿谷歌：

https://stackoverflow.com/questions/6587393/resource-interpreted-as-document-but-transferred-with-mime-type-application-zip

https://blog.csdn.net/u013009809/article/details/53172675/

有人通过下面这段代码解决了问题：

var link = document.createElement('a');
link.target = '_blank';
link.href = url;
document.body.appendChild(link); // Required for Firefox
link.click();
link.remove();

据我猜测可能是跟下面这段描述有点关系：

注意: 此属性仅适用于同源 URL。尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。如果 HTTP 头中的 Content-Disposition 属性赋予了一个不同于此属性的文件名，HTTP 头属性优先于此属性。如果 HTTP 头属性 Content-Disposition 被设置为inline（即 Content-Disposition='inline'），那么 Firefox 优先考虑 HTTP 头 Content-Dispositiondownload 属性。

所以，可能需要设置

a.download = 'filename'

又或者是使用 post 请求

明天一探究竟吧，已经晚了，该洗洗睡了。

@description 本文完成于 2020-09-24 23:20:52