这篇文章主要介绍了前端vue中怎么实现文件下载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇前端vue中怎么实现文件下载文章都会有所收获,下面我们一起来看看吧。
前端创建超链接,通过a标签向后端发送get请求,需要给a标签添加一个download属性
这种写法是创造了一个a标签,把地址写到a标签里再用js调用点击,实现访问文件地址就是下载了
代码如下:
<a @click="downloadFile(file.url,file.originalFilename, file.id, file.fileTye)" >下载</a> // 参数分别是:文件的路径 文件的名字 文件的id 文件的类型
downloadFile(url, fileName, flieId, type) { let link = document.createElement('a'); link.style.display = 'none'; link.href = baseUrl + '/xxx/xxx/xxx?flieId=' + flieId; document.body.appendChild(link); link.click(); },
或者
<a :href='"/user/downloadExcel"' >下载模板</a> //另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" "downloadExcel()">下载</div> function downloadExcel() { let a = document.createElement('a') a.href ="/xxx/xxx" a.click(); }
通过window.open()下载
window.open就是打开了一个新网页直接在新网页访问文件地址了,只要访问文件地址,就能下载文件。这时候后端返回的是文件流直接渲染,不需要url再打开下载了
downloadFile() { window.open( baseUrl + '/xxx/xxx/xxx/getTemplate?templateCode=manual_pc', '_self' ); },
通过创建iframe的方式:
<el-button size="mini" @click="handleExport(scope.row)">导出</el-button> //method方法: handleExport(row) { var elemIF = document.createElement('iframe') elemIF.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') + '&category=' + row.category elemIF.style.display = 'none' document.body.appendChild(elemIF) }
以文件流的形式,会对后端发post请求,使用blob格式,这种写法对于图片和pdf及svg能实现下载功能
<a @click="downloadFile(file.name, file.url)" >下载</a> /* 第一个参数是文件的名字,第二个参数是文件的路径*/ downloadFile(fileName, fileUrl) { if (!fileUrl) { return; } let url = window.URL.createObjectURL(new Blob([fileUrl])); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); }
如果后端返回的格式是文件流形式的,就不用转换成Blob形式了。就可以直接简写为:
<a :href="src" rel="external nofollow" download="name"/>
因为是文件流下载,所以在取后台数据的时候,要多传递一个【responseType: ‘blob’】这个参数
function downloadPost (config){ return new Promise((resolve,reject) => { axios({ url: config.url,// 请求地址 method: 'post', data: config.data,// 参数 responseType: 'blob'// 表明返回服务器返回的数据类型 }).then(res => { resolve(res) }).catch(err=>{ reject(err); }); }); }
如果后端提供的下载接口是get类型,可以直接使用方法一和二和三,简单又便捷;当然如果想使用方法四也是可以的,不过感觉有点舍近求远了。
如果后端提供的下载接口是post类型,就必须要用方法四了。
关于“前端vue中怎么实现文件下载”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“前端vue中怎么实现文件下载”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。