如何实现文件下载.docx

《如何实现文件下载.docx》由会员分享，可在线阅读，更多相关《如何实现文件下载.docx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、如何实现文件下载反响还不错时隔多日由于最近有研究一些媒体相关的工作因此打算对下载做一个整理因此他的兄弟篇诞生了带你领略文件下载的奥秘。本文会花费你较长的时间浏览建议先珍藏/点赞然后查看你感兴趣的局部平时可以以充当当做字典的效果来查询。:)不整不知道一整居然整出这么多情况我只是想简单地做个页面仔。一图览全文可以先看看大纲适不合适自己假如你喜欢那么继续往下浏览。一文解析文件下载这一节呢主要介绍一些前置知识对一些根底知识的介绍假如你觉得你是这个。你可以跳过前言。以及荣耀王者讲你嘛呢_荣耀_王者表情前端的文件下载主要是通过a再加上download属性,有了它们让我们的下载变得简单。download此属

2、性指示阅读器下载URL而不是导航到它因此将提示用户将其保存为本地文件。假如属性有一个值那么此值将在下载保存经过中作为预填充的文件名假如用户需要仍然可以更改文件名。此属性对允许的值没有限制但是/以及会被转换为下划线。大多数文件系统限制了文件名中的标点符号故此阅读器将相应地调整建议的文件名。(摘自s:/developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)注意:此属性仅适用于同源URL。尽管HTTPURL需要位于同一源中但是可以使用blob:URL以及data:URL以方便用户下载使用JavaScript生成的内容例如使用在线绘图Web应用程序创立

3、的照片。因此下载url主要有三种方式。(本文大局部以blob的方式进展演示)image-20202030153314861兼容性可以看到它的兼容性也非常的可观s:/caniuse/#searchdownloadimage-20202017232216749为了防止很多代码的重复性因为我抽离出了几个公共函数。(该局部可跳过名字都比拟可读之后假设是遇到不明白那么可以在这里寻找)exportfunctiondownloadDirect(url)constaTagdocument.createElement(aaTag.downloadurl.split(/).pop();aTag.hrefurl;a

4、Tag.click()exportfunctiondownloadByContent(content,filename,type)constaTagdocument.createElement(aaTag.downloadfilename;constblobnewBlob(content,type);constblobUrlURL.createObjectURL(blob);aTag.hrefblobUrl;aTag.click();URL.revokeObjectURL(blob);exportfunctiondownloadByDataURL(content,filename,type)c

5、onstaTagdocument.createElement(aaTag.downloadfilename;constdataUrldata:$type;base64,$window.btoa(unescape(encodeURIComponent(content)aTag.hrefdataUrl;aTag.click();exportfunctiondownloadByBlob(blob,filename)constaTagdocument.createElement(aaTag.downloadfilename;constblobUrlURL.createObjectURL(blob);a

6、Tag.hrefblobUrl;aTag.click();URL.revokeObjectURL(blob);exportfunctionbase64ToBlob(base64,type)constbyteCharactersatob(base64);constbyteNumbersnewArray(byteCharacters.length);for(letiibyteCharacters.length;i)byteNumbersibyteCharacters.charCodeAt(i);constbufferUint8Array.from(byteNumbers);constblobnew

7、Blob(buffer,type);returnblob;? (手动给不看以上内容的大佬画分割线?所有例如Github地址:s:/github/hua1995116/node-demo/tree/master/file-download在线Demo:s:/qiufeng.blue/demo/file-download/index.html前端文件下载本文后端所有例如均以koa/原生js实现。后端返回文件流这种情况非常简单我们只需要直接将后端返回的文件流以新的窗口翻开即可直接下载了。/前端代码buttonidoBtnDownload点击下载/buttonscriptoBtnDownload.on

8、clickfunction()window.open(:/localhost:8888/api/download?filename1597375650384.jpg,_blank)/script/后端代码router.get(/api/download,async(ctx)constfilenamectx.query;constfStatsfs.statSync(path.join(_dirname,./static/,filename);ctx.set(Content-Type:application/octet-stream,Content-Disposition:attachment;f

9、ilename$filename,Content-Length:fStats.size);ctx.bodyfs.readFileSync(path.join(_dirname,./static/,filename);可以让阅读器自动下载文件主要有两种情况:一种为使用了Content-Disposition属性。我们来看看该字段的描绘。在常规的HTTP应答中Content-Disposition响应头指示回复的内容该以何种形式展示是以内联的形式即网页或页面的一局部还是以附件的形式下载并保存到本地-来源MDN(s:/developer.mozilla.org/zh-CN/docs/Web/HTTP

10、/Headers/Content-Disposition)再来看看它的语法Content-Disposition:inlineContent-Disposition:attachmentContent-Disposition:attachment;filenamefilename.jpg很简单只要设置成最后一种形态我就能成功让文件从后端进展下载了。另一种为阅读器无法识别的类型例如输入:/localhost:8888/static/demo.sh阅读器无法识别该类型就会自动下载。不知道小伙伴们有没有遇到过这样的一个情况我们输入一个正确的静态js地址没有配置Content-Disposition但

11、是却会被意外的下载。例如像以下的情况。2020-08-30-17.01.52006r3PQBjw1fav4dsikh6j308c0g5gm1这很可能是由于你的nginx少了这一行配置.includemime.types;导致默认走了application/octet-stream阅读器无法识别就下载了文件。后端返回静态站点地址通过静态站点下载这里要分为两种情况一种为可能该效劳自带静态目录即为同源情况第二种情况为适用了第三方静态存储平台例如阿里云、腾讯云之类的进展托管即非同源当然也有些平台直接会返回。同源情况下是非常简单先上代码直接调用一下函数就能轻松实现下载。importdownloadDir

12、ectfrom./js/utils.jsaxios.get(:/localhost:8888/api/downloadUrl).then(resif(res.data.code0)downloadDirect(res.data.data.url);我们可以以从MDN上看到固然download限制了非同源的情况但是但是但是可以使用blob:URL以及data:URL因此我们只要将文件内容进展下载转化成blob就可以了。整个经过如下image-20202030174735143buttonidoBtnDownload点击下载/buttonscripttypemoduleimportdownload

13、ByBlobfrom./js/utils.jsfunctiondownload(url)axios(method:get,url,responseType:blob).then(resdownloadByBlob(res.data,url.split(/).pop();)oBtnDownload.onclickfunction()axios.get(:/localhost:8888/api/downloadUrl).then(resif(res.data.code0)download(res.data.data.url);)/script如今非同源的可以以愉快地下载啦。后端返回字符串base6

14、4有时候我们也会遇到一些新手后端返回字符串的情况这种情况很少见但是来了我们也不慌顺便可以向后端小哥秀一波操作不管啥数据咱都能给你下载下来。ps:前提是平安无污染的资源:),正经文章的招牌闪闪发光。这种情况下我需要模拟下后端小哥的骚操作因此有后端代码。994b6f2egy1fgryfevtpvj208c08cmxd核心经过image-20202030174752476/node端router.get(/api/base64,async(ctx)constfilenamectx.query;constcontentfs.readFileSync(path.join(_dirname,./stati

15、c/,filename);constfStatsfs.statSync(path.join(_dirname,./static/,filename);console.log(fStats);ctx.bodycode:0,data:base64:content.toString(base64),filename,type:mime.getType(filename)/前端buttonidoBtnDownload点击下载/buttonscripttypemoduleimportbase64ToBlob,downloadByBlobfrom./js/utils.jsfunctiondownload(

16、base64,filename,type)constblobbase64ToBlob(blob,type);downloadByBlob(blob,filename);oBtnDownload.onclickfunction()axios.get(:/localhost:8888/api/base64?filename1597375650384.jpg).then(resif(res.data.code0)download(res.data.data);)/script思路其实还是利用了我们上面讲的a标签。但是在这个步骤前多了一个步骤就是需要将我们的base64字符串转化为二进制流这个东西在我

17、的前一篇文件上传中也常常提到毕竟文件就是以二进制流的形式存在。不过也很简单js拥有内置函数atob。极大地进步了我们转换的效率。上面介绍借助后端来完成文件下载的相关方法接下来我们来介绍介绍纯前端来完成文件下载的一些方法。方法一:blob:URLimage-20202031230800538方法二:data:URLimage-20202031230810963由于data:URL会有长度的限制因此下面的所有例子都会采用blob的方式来进展演示。json/text下载text以及json非常的简单可以直接构造一个Blob。Blob(blobParts,options)返回一个新创立的Blob对象其

18、内容由参数中给定的数组串联组成。/htmltextareanameidtextcols30rows10/textareabuttonidtextBtn下载文本/buttonp/ptextareanameidjsoncols30rows10disabledname:秋风的笔记/textareabuttonidjsonBtn下载JSON/button/jsimportdownloadByContent,downloadByDataURLfrom./js/utils.jstextBtn.onclick()constvaluetext.value;downloadByContent(value,hel

19、lo.txt,text/plain/downloadByDataURL(value,hello.txt,text/plainjsonBtn.onclick()constvaluejson.value;downloadByContent(value,hello.json,application/json/downloadByDataURL(value,hello.json,application/json效果图2020-08-30-17.53.32注释代码为data:URL的展示局部由于是第一个例子因此我讲展示代码后面都省略了但是你可以以通过调用downloadByDataURL方法找不到该方法

20、的定义请滑到文章开始哦excelexcel可以讲是我们局部前端打交道很深的一个场景什么数据中台天天需要导出各种报表。以前都是前端恳求后端来获取一个excel文件地址。如今让我们来展示下纯前端是怎样实现下载excel。简单excel表格长这个模样比拟简陋的形式image-20202029170347728consttemplatehtmlxmlns:ourn:schemas-microsoft-com:office:officexmlns:xurn:schemas-microsoft-com:office:excelxmlns:/w3.org/TR/REC-html40head/headbody

21、tableborder1stylewidth:60%;text-align:center;table/table/body/htmlconstcontexttemplate.replace(table,document.getElementById(excel).innerHTML);downloadByContent(context,qiufengblue.xls,application/vnd.ms-excel但是编写并不复杂照旧是以及我们之前一样通过构造出excel的格式转化成blob来进展下载。最终导出的效果image-20202029170625763element-ui导出表格没错

22、这个就是element-ui官方table的例子。image-20202029170543891导出效果如下可以讲非常完美。image-20202029170912128这里我们用到了一个插件s:/github/SheetJS/sheetjs使用起来非常简单。templateel-tableideleborder:datatableDatastylewidth:100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-tab

23、le-columnpropaddresslabel地址/el-table-column/el-tablebuttonclickexportExcel导出excel/button/templatescriptmethods:exportExcel()letwbXLSX.utils.table_to_book(document.getElementById(eleXLSX.writeFile(wb,qiufeng.blue.xlsx/script完美表情word讲完了excel我们再来说说word这可是office三剑客另外一大利器。这里我们照旧是利用上述的blob的方法进展下载。简单例如2020

24、-08-29-20.13.25代码展示exportWord.onclick()consttemplatehtmlxmlns:ourn:schemas-microsoft-com:office:officexmlns:xurn:schemas-microsoft-com:office:wordxmlns:/w3.org/TR/REC-html40head/headbodytable/body/htmlconstcontexttemplate.replace(table,document.getElementById(word).innerHTML);downloadByContent(conte

25、xt,qiufeng.blue.doc,application/msword效果展示image-20202030164208184使用docx.js插件假如你想有更高级的用法可以使用docx.js这个库。当然用上述方法也是可以高级定制的。代码buttontypebuttononclickgenerate()下载word/buttonscriptasyncfunctiongenerate()constresawaitaxios(method:get,url:/localhost:8888/static/1597375650384.jpg,responseType:blob)constdocnew

26、docx.Document();constimage1docx.Media.addImage(doc,res.data,300,400)doc.addSection(properties:,children:newdocx.Paragraph(children:newdocx.TextRun(欢送关注秋风的笔记公众号).break(),newdocx.TextRun().break(),newdocx.TextRun(定期发送优质文章).break(),newdocx.TextRun().break(),newdocx.TextRun(美团点评2020校招-内推).break(),),newd

27、ocx.Paragraph(image1),);docx.Packer.toBlob(doc).then(blobconsole.log(blob);saveAs(blob,qiufeng.blue.docxconsole.log(Documentcreatedsuccessfully);/script效果没有打广告.随意找了张图强行不成认系列9150e4e5ly1fl8qavz6quj20hs0hsjvl2020-08-30-18.32.09zip下载前端压缩还是非常有用的在一定的场景下可以节省流量。而这个场景比拟使用于例如前端打包图片下载、前端打包下载图标。一开场我以为我s:/tinypn

28、g/就是用了这个结果我发现我错了.仔细一想因为它压缩好的图片是存在后端的假如使用前端打包的话反而要去恳求所有压缩的图片进而来获取图片流。假如用后端压缩话可以有效节省流量。嗯。失败例子告终。后来又以为s:/image-20202029204540440它官网都是svg渲染的图标对于svg下载的时候完全可以使用前端打包下载。但是它还支持font和jpg格式所以为了统一采用了后端下载可以理解。那我们就来实现这个它未完成的功能当然我们还需要用到一个插件就是jszip。这里我从以上找了两个svg的图标。image-20202029204937044实当代码download.onclick()constz

29、ipnewJSZip();constsvgListid:demo1,id:demo2,svgList.map(itemzip.file(item.id.svg,document.getElementById(item.id).outerHTML);)zip.generateAsync(type:blob).then(function(content)/下载的文件名varfilenamesvg.zip/创立隐藏的可下载链接vareleLinkdocument.createElement(aeleLink.downloadfilename;/下载内容转变成blob地址eleLink.hrefURL

30、.createObjectURL(content);/触发点击eleLink.click();/然后移除);2020-08-29-20.52.42查看文件夹目录已经将SVG打包下载完毕。image-20202029205329532阅读器文件系统实验性image-20202017234129788在我电脑上都有这么一个阅读器用来学习以及调试chrome的最新新特性,假如你的电脑没有建议你安装一个。玩这个特性需要翻开chrome的实验特性chrome:/flags#native-file-system-apienable,因为实验特性都会伴随一些平安或影响本来的渲染的行为因此我再次强烈建议下载一

31、个金丝雀版本的chrome来进展玩耍。textareanameidtextareacols30rows10/textareapbuttonidbtn下载/button/pscriptbtn.onclickasync()consthandlerawaitwindow.chooseFileSystemEntries(type:save-file,accepts:description:Textfile,extensions:txt,mimeTypes:text/plain,);constwriterawaithandler.createWritable();awaitwriter.write(te

32、xtarea.value);awaitwriter.close();/script实现起来非常简单。却飞一般的感觉。2020-08-18-00.13.29其他场景H5文件下载一般在h5下载比拟多的是pdf或是apk的下载。Android在安卓阅读器中阅读器直接下载文件。由于ios的限制无法进展下载因此可以使用复制url来代替下载。importdownloadDirectfrom./js/utils.jsconstbtndocument.querySelector(#download-iosif(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent

33、)constclipboardnewClipboardJS(btn);clipboard.on(success,function()alert(已复制链接翻开阅读器粘贴链接下载);clipboard.on(error,function(e)alert(系统版本过低复制链接失败);elsebtn.onclick()downloadDirect(btn.dataset.clipboardText)对于apk等下载包可以使用这个包本人暂时没有试验接触不多回头熟悉了再回来补充。s:/github/jawidx/web-launch-appimage-20202030145258473大文件的分片下载最

34、近在开发媒体流相关的工作的时候发如今加载mp4文件的时候发现了一个比拟有意思的现象视频流并不需要将整个mp4下载完才进展播放并且伴随了很多状态码为206的恳求乍一看有点像流媒体(HLS等)的韵味。2020-08-29-21.31.29觉得这个现象非常的有意思他可以分片地加载资源这对于体验或是流量的节省都是非常大的帮助。最终发现它带了一个名为Range的头。我们来看看MDN的解释。TheRange是一个恳求首部告知效劳器返回文件的哪一局部。在一个Range首部中可以一次性恳求多个局部效劳器会以multipart文件的形式将其返回。假如效劳器返回的是范围响应需要使用206PartialConten

35、t状态码。摘自MDN语法Range:unitrange-start-Range:unitrange-start-range-endRange:unitrange-start-range-end,range-start-range-endRange:unitrange-start-range-end,range-start-range-end,range-start-range-endNode实现既然我们知道了它的原理就来自己实现一下。router.get(/api/rangeFile,async(ctx)constfilenamectx.query;constsizefs.statSync(p

36、ath.join(_dirname,./static/,filename);constrangectx.headersrangeif(!range)ctx.set(Accept-Ranges,bytesctx.bodyfs.readFileSync(path.join(_dirname,./static/,filename);return;conststart,endgetRange(range);if(startsize|endsize)ctx.response.status416;ctx.set(Content-Range,bytes*/$sizectx.bodyreturn;ctx.re

37、sponse.status206;ctx.set(Accept-Ranges,bytesctx.set(Content-Range,bytes$start-$end?end:size-1/$sizectx.bodyfs.createReadStream(path.join(_dirname,./static/,filename),start,end);Nginx实现发现nginx不需要写任何代码就默认支持了range头想着我一定知道它到底是支持还是参加了什么模块或是我默认开启了什么配置找了半天没有找到什么额外的配置。3630px-Nginx_logo-1正当我准备放弃的时候灵光一现去看看源码吧

38、讲不定会有发现去查了nginx源码相关的内容用了惯用的反推方式才发现原来是max_ranges这个字段。s:/github/nginx/nginx/blob/release-1.13.6/src/modules/ngx_range_filter_module.c#L166这也怪我一开场文档浏览不够仔细浪费了大量的时间。:)其实我对nginx源码也不熟悉这里可以用个小技巧直接在源码库搜索206然后发现了一个宏命令#defineNGX_HTTP_PARTIAL_CONTENT206然后顺藤摸瓜直接找到这个宏命令NGX_HTTP_PARTIAL_CONTENT用到的地方这样一步一步就渐渐能找到我们想要的。默认nginx是自动开启range头的,假如不需要配置那么配置max_range:0;Nginx配置文档:/nginx.org/en/docs/ngx_core_module.html#max_ranges我们可以来总结一下其实全文主要讲了(xbb)两个核心的知识一个是blob一个a标签另外还要注意对于大文件效劳器的优化策略可以通过Range来分片加载。image-20202030181216353参考资料s:/github/dolanmiu/docxs:/github/SheetJS/sheetjss:/juejin.im/post/6844903763359039501