纯前端的下载方案

勿忘初心2018-09-04 10:55

作者:梁枫


场景

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

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

说明

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

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