bug 回忆录(一)

用户头像
志学Python
关注
发布于: 2020 年 09 月 28 日
bug 回忆录(一)

------



@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



------



欢迎关注我的公众号《前端小Ken》



发布于: 2020 年 09 月 28 日 阅读数: 30
用户头像

志学Python

关注

Ken 2019.06.12 加入

不断的探索尝试,不断探索尝试,不断探索尝试,永远不要放弃学习,前进,追求卓越,幸福就会追着你跑了,去发现自己的闪光点,在追求幸福的道路上,难免坎坷,但是思维决定幸福层度 在这里不仅仅只有技术

评论

发布
暂无评论
bug 回忆录(一)