摘要：当后台返回一个文件地址给前端时，前端需要下载并重命名，并显示下载进度。使用的技术：ajax、blob、vue插件file-saver1，关于插件我们不做过多解释，这里就直接使用，这是插件教程地址：http://vuejscomponent.com/pac...2、项目代码importFileSaverfrom'file-saver'//URL：文件存放地址，fileName：保存文件名，downloadType：保存文件格式constsingleFileDownload=(url,fileName,downloadType)=>{returnnewPromise((resolve,reject)=>{if(!url||!fileName){reject('文件不存在')return}varxhr=newXMLHttpRequest()xhr.open('GET',url,true)xhr.responseType='blob'//当请求发送到服务器时，我们需要执行一些基于响应的任务。//每当readyState发生变化时，都会触发onreadystatechange事件。//onreadystatechange存储函数（或函数名称），将在readyState属性更改时调用此函数。//readyState//保存XMLHttpRequest的状态。从0变为4。//0：请求未初始化//1：已建立服务器连接//2：已收到请求//3：正在处理请求//4：请求已完成，响应为ready//当为true时，表示异步发送请求，请在onreadystatechange事件中指定当响应处于就绪状态时执行的函数：xhr.onreadystatechange=()=>{if(xhr.readyState===4){if(xhr.status===200||xhr.status===0){letfile=nullif(downloadType==='pdf'){file=newBlob([xhr.response],{类型：“申请/pdf”});}else{file=newBlob([xhr.response],{type:"application/zip"});}FileSaver.saveAs(file,fileName)resolve('下载成功')}else{reject(newError(fileName+'下载失败'),null)}}}xhr.addEventListener('progress',(e)=>{//e.total是文件的总字节数e.loaded是文件加载了多少字节//downloadFile.progress=(e.loaded*1.0/e.total*100).toFixed(2)+'%'//downloadFile.progress=(e.loaded/(1024*1024)).toFixed(2)+'M/'+(e.total/(1024*1024)).toFixed(2)+'M'})xhr.send()})}
