前端vue中实现文件下载的几种方法 |
您所在的位置：网站首页 › 前端上传下载文件怎么操作的视频 › 前端vue中实现文件下载的几种方法 |
|
第一种 前端创建超链接，通过a标签向后端发送get请求，需要给a标签添加一个download属性 这种写法是创造了一个a标签，把地址写到a标签里再用js调用点击，实现访问文件地址就是下载了 代码如下: 下载 // 参数分别是：文件的路径 文件的名字 文件的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(); },或者 下载模板 //另一种情况是创建div标签，动态创建a标签： 下载 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的方式： 导出 //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能实现下载功能 下载 /* 第一个参数是文件的名字，第二个参数是文件的路径*/ 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形式了。就可以直接简写为： 因为是文件流下载，所以在取后台数据的时候，要多传递一个【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类型，就必须要用方法四了。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |