前端vue中怎么实现文件下载

这篇文章主要介绍了前端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中怎么实现文件下载”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。