VUE 导出Excel(iframe)

1. 概述

1.1 说明

在开发过程中，有时候需要导出某数据表格(excel)以便客户使用，使用iframe对返回二进制文件进行下载处理。记录此功能，以便后期使用。

2. 示例

2.1 vue示例代码

<template>
  <div>
    <button class="btnClass" @click="downExcel">下载</button>
    <iframe frameborder="0" name="downExcel" style="display:none"></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {}
  },
  methods: {
    downExcel() {
      let iframe = window.frames['downExcel'];
      //console.log('iframe',iframe.location.href);
      let href = '';//接口路径地址，返回数据类型为application/binary，后台控制显示信息，前端仅为下载功能
      iframe.location.href = href
    }
  }
}
</script>
<style scoped>
.btnClass{
  width: 200px;
  background-color: cornflowerblue;
  height: 60px;
  border: none;
  color: #ffffff;
  font-size:30px;
  cursor:pointer
}
</style>