纯前端的下载方案

作者：梁枫

场景

日常工作中我们偶尔会遇到提供资源下载给用户的场景。这个资源可能是静态文件，也可能是动态内容。如果是静态文件，那就需要先上传文件到服务器中。如果是动态内容，就需要后端童鞋写对应的功能。

这种模式在应对大型或复杂的下载资源时没有问题，但当资源比较小或简单时，就有些重量级。这种时候，如果前端能够独自生成资源供用户下载就很具有优势了。

说明

a标签的download属性是HTML5新引入的，用以告诉浏览器该标签中的链接是可下载的资源，属性值就是下载到本地的文件名。详情查看标准。

<a href="http://www.foo.com/bar.txt" download="bar.txt">下载</a>

强大源于组合

download属性看起来很简单，但是有了它，前端就可以摆脱后端独自提供资源下载给用户。当然还需要搭配其他前端技术。

dataURI

dataURI是一种URI模式，可以包含文件数据。因为前端是可以独自拼接出dataURI的，所以组合download属性后，就可以动态创建一个可下载的文本文件资源了。

var url = 'data:text/plain;charset=utf-8,' + encodeURIComponent('Hello world!');
$('<a href="'+ url +'" download="hello.txt">下载</a>').appendTo('body');

Canvas

除了文本文件，我们还可以组合使用Canvas用来动态创建一个可下载的图片资源。因为Canvas不只可以绘图，还可以将图像数据导出成dataURI链接。

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
$('<a href="'+ canvas.toDataURL() +'" download="canvas.png">下载</a>').appendTo('body');

结语

在没有后端配合的情况下，前端是可以独自动态生成可下载的文本和图片文件资源。这样做的好处是减少请求数，减轻服务器压力，去掉前后端协调成本。但是目前这种方式还不能大范围使用，因为download属性还没有得到广泛的浏览器支持，支持详情请查阅caniuse。不过倒是可以先在实验项目或是内部项目中使用。

网易云大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者梁枫授权发布