web前端：Vue 实现文件的下载

作者:胖胖的妖怪更新于： 2020-03-01 16:09:28

　　广义的"文件"指公文书信或指有关政策、理论等方面的文章。文件的范畴很广泛，电脑上运行的如杀毒、游戏等软件或程序都可以叫文件。

　　上次说了，实现文件的上传需要三步，那么实现文件的下载呢？

　　答：也是三步

　　第一步：获取文件的fileId(或者别的什么的，总之应该是代表这个文件的东西)，各家后台需要的都不一样

　　第二步：调用接口

　　this.$http({

　　url:this.HOST+api.download,

　　method:'post',

　　params:{

　　fileId:fileId//此处上传第一步获取到的fileid

　　},

　　responseType:'arraybuffer'//此处注意请求头

　　}).then(function(res){

　　varthis=that

　　varfileName=that.files.name//此处获取文件名称

　　that.download(res.data,fileName)//此处跳转到第三步

　　})

　　第三步：处理返回值，并下载

　　download(data,fileName){

　　if(!data){

　　return

　　}

　　leturl=window.URL.createObjectURL(newBlob([data]))//创建下载链接

　　letlink=document.createElement('a')//创建a标签

　　link.style.display='none'//将a标签隐藏

　　link.href=url//给a标签添加下载链接

　　link.setAttribute('download',fileName)//此处注意，要给a标签添加一个download属性，属性值就是文件名称否则下载出来的文件是没有属性的，空白白

　　document.body.appendChild(link)

　　link.click()//执行a标签

　　}

　　狭义的"文件"一般特指文书，或者叫做公文。文件是人们在各种社会活动中产生的记录。狭义的"文件"并不能等同于"档案"，它们的主要区别在于是否具有保存价值以及是否具备原始记录的性质。如果两者都具备，则可以称之为"档案"，否则只能算作文件。虽然两者有很大的交集，但绝不能等同。