前端Vue中文件导出下载方式

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

薛大傻子

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

阅读量1.5k

点赞数 2

分类专栏：前端 Vue 下载文档文章标签： vue.js 前端

本文链接：https://blog.csdn.net/xuecuilan/article/details/108868460

版权

本文介绍了在Vue前端中实现文件下载的三种方法：通过a标签的get请求、创建iframe以及使用blob处理post请求。对于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 = document.createElement('iframe')
      elemIF.s