JavaScript tips —— 关于下载与导出的二三事

前言

在项目中经常会遇到下载或导出服务端资源的需求，一般分为2种做法

1.获取文件流，编码后下载2.获取文件的url，直接下载本文主要探讨第二种方法，在最后会提及文件流的方法。浏览器的安全策略

在介绍方法之前，我们需要知道浏览器的一些安全机制，防止恶意代码对用户的破坏。

现代浏览器（ie8除外）检测到非用户直接操作产生的新窗口，一般会阻止，比如在ajax的回调中打开新的窗口，因为这些操作并不是在用户点击的线程中，所以会拦截。预开新标签页

做法

1.在异步操作之前，先打开一个新标签页2.请求后端资源的地址3.获取url后去修改空白页的url```

const downloadTab = window.open('about:blank');

ajax.get('xxx').then(url => {// 使用后端资源的url进行下载downloadTab.location.href = href;

}).catch(err => {// 处理异常downloadTab.close();

})

### 缺点

1.不管请求成功还是失败都会有新页面的闪烁出现2.打开的新页面在什么时候关闭是个问题，因为如果请求时间过长，用户可能自己关闭新页面，更不好处理的情况是页面什么时候触发了下载，因为如果只是更改url就关闭窗口可能还没有开始下载的操作。生成iframe
--------

### 做法

为了避免页面闪烁与关闭时机的问题，可以在当前页面使用动态创建iframe的方式，直接下载

ajax.get('xxx').then(href => {if (!href) {return;}if (!this.downIframe) {this.downIframe = document.createElement('iframe'); // 动态创建iframethis.downIframe.src = href; // iframe 中加载的页面this.downIframe.id = 'downloadIframe'; // iframe 中加载的页面this.downIframe.style.width = '1px';this.downIframe.style.height = '1px';this.downIframe.style.position = 'absolute';this.downIframe.style.left = '-100px';document.body.appendChild(this.downIframe); // 添加到当前窗体} else {this.downIframe.src = href; // iframe 中加载的页面}

}).catch(err => {// 处理异常

})

### 缺点

虽然可以优雅的下载文件了，可是如果需要定制下载文件的名称就会令人头疼了，我们需要时机去改变下载文件的名称，否则就会使服务端的文件名称。生成标签
----

利用download属性设置文件名，

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/6/15/16401ac40b5dd8b2~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image" style="margin: auto" />

ajax.get('xxx').then(href => {if (!href) {return;}var a = document.createElement('a');var url = href;var filename = 'test.zip';a.href = url;a.download = filename; // 在没有download属性的情况，target="_blank"，仍会阻止打开a.click();

}).catch(err => {// 处理异常

})

注意：

有些浏览器需要将a标签嵌入页面才可执行。处理文件流
-----

最后大概讲一下如果后端返回流怎么处理。

function funDownload(content, filename) {// 创建隐藏的可下载链接var link = document.createElement('a');link.download = filename;link.style.display = 'none';// 字符内容转变成blob地址var blob = new Blob([content]);//如果是excel格式//var blob = new Blob([content], {type: 'application/vnd.ms-excel'}),link.href = URL.createObjectURL(blob);// 触发点击document.body.appendChild(link);link.click();// 然后移除document.body.removeChild(link);

};