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>