前端vue中文件下载的几种方式

最新推荐文章于 2024-07-23 19:11:17 发布

mini召唤师

最新推荐文章于 2024-07-23 19:11:17 发布

阅读量647

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_58442608/article/details/123234041

版权

本文介绍了在Vue.js前端实现文件下载的三种方法：通过a标签的get请求、利用iframe和使用POST请求配合Blob。对于GET类型的后端接口，前两种方法简便快捷，而POST接口则需采用第三种方式。

摘要由CSDN通过智能技术生成

第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：

第一种
<a :href='"/user/downloadExcel"' >下载模板</a>




第二种情况是创建div标签，动态创建a标签：
<div name="downloadfile" onclick="downloadExcel()">下载</div>


function downloadExcel() {
    let a = document.createElement('a')
    a.href ="/user/downloadExcel"
    a.click();
} 
还有一种补充：
 function downloadExcel() {
    window.location.href = "/tUserHyRights/downloadUsersUrl";
}

第二种方式通过创建iframe的方式：

<el-button  size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
//method方法：
handleExport(row) {
      var elemIF = d