如何巧妙的实现文件下载

如何巧妙的实现文件下载

文件上传下载在业务开发中很是常见，尤为在企业级应用中；实现图片、报表类文件的下载居多。最近我有赞商品中心后台商品批量改价功能模块与堂食点单插件功能模块中就遇到文件下载的需求。

常见的处理方式

通常在文件下载的方式：

window.open

window.open("htpp://127.0.0.1/test.rar");
复制代码

使用 window.open 是能够实现文件的下载，正常的 zip 、 rar 、 arj 等文件是可使用 window.open 打开的；window.open 可以打开的原理是让我门用浏览器打开一个文件时，若是浏览器没法解析，它就会把该文件下载下来。好比： html 、 pdf 、 png 等使用 window.open 是没法打开的。

另一点，使用 window.open 会受到浏览器安全策略的限制，会静默该行为。

window.location

使用 window.location.href ='xxx.zip' 或者 window.location='xxx.zip' 实现文件的下载； 可是该方法不只具备 window.open 的限制，还会受到浏览器兼容性的影响。

a 标签

还有一种处理方式：使用 H5 a 标签 download 新特性，其是规定超连接下载的目标。好比

<a href="https://github.com/Yao-JSON/blog/archive/master.zip" download="blog">
  Download ZIP
</a>
复制代码

该方法兼容性较好，并且交互体验友好，不须要打开一个新的窗口，在当前窗口下实现下载。最具表明性的解决案例是：Github Docunload Zip ；

可是该方案仅适用于已知的服务器端静态资源文件下载，在业务上颇有局限性。一般在业务开发中，文件一般是后端生成动态的下载，因此如下才是正确的处理方式。

动态的建立 a 标签

动态建立 a 标签，实施下载；顾名思义，就是建立一个 a 标签，添加 href 、 download 属性，模拟用户点击，实现下载。 具体代码以下：兼容()

const downloadFile = (url, fileName = '') => {
  let eleLink = document.createElement('a');
  eleLink.download = fileName;
  eleLink.style.display = 'none';
  eleLink.href = url;
  // 受浏览器安全策略的因素，动态建立的元素必须添加到浏览器后才能实施点击
  document.body.appendChild(eleLink);
  // 触发点击 
  eleLink.click();
  // 而后移除
  document.body.removeChild(eleLink);
};

export default downloadFile;
复制代码

其余下载

如何下载 html 片断或者文本

import downloadFile from './downloadFile';

const debug = ['<a id="a"><b id="b">hey!</b></a>'];
const blob = new Blob(debug,{
    type: 'text/html'
})

const url = URL.createObjectURL(blob);

downloadFile(url, 'index.html');

复制代码

图片是base64 如何实现下载

import downloadFile from './downloadFile';

const debug = ['base:...'];
const blob = new Blob(debug,{
    type: 'text/html'
})

const url = URL.createObjectURL(blob);

downloadFile(url, 'index.html');
复制代码

canvas 下载

import downloadFile from './downloadFile';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
...
...
...
const src = canvas.toDataURL('image/png')

downloadFile(src, 'canavs.png')
复制代码

实施案例：

github 欢迎 star