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

最新推荐文章于 2025-09-19 20:00:00 发布

原创

最新推荐文章于 2025-09-19 20:00:00 发布 · 1.6k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍了在Vue前端中实现文件下载的三种方法：通过a标签的get请求、创建iframe以及使用blob处理post请求。对于get类型的下载接口，前两种方法简单便捷，post类型则需使用第三种方法。

第一种方式是前端创建超链接，通过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.src = 'user/downloadExcel?snapshotTime=' + formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm') +
                    '&category=' + row.category 
      elemIF.style.display = 'none'
      document.body.appendC

标签