前端实现导出及下载文件

前端实现导出及下载文件

首先解释下，单靠前端是无法实现，下载功能的，前端只能实现触发下载，
后端实现下载

下面是2种实现方式

下面用vue的代码示例

一、 利用window.open()和iframe

//html
<template>
<div>
<button  @click="toDownload"> 导出   </button>
   <!-- 用于打开下载窗口 -->
    <iframe name="downloadIframe" style="display:none" />
<div>
</template>
<script>
    export default {
        methods:{
            toDownload(){
                //第一个参数为下载的地址，如果要携带参数，后面拼接，
                //第二参数，为窗口如何打开
              window.open('http://localhost:8080/user/downLoad/name.jpg', 'downloadIframe')  
            } 
        }
    }
  </script>
    

二、form表单下载

form 表单提交 是formdata数据

会以表单中input的name值为可以值，input框中输入的值为value组成一个对象

如果没有name值是不会上传的

<template>
<div>
    
    <form id="downForm" action="http://localhost:8080/user/downLoad"  method="POST" target="downloadIframe" enctype="multipart/form-data" >
        <input name="userName" v-model="userName" />
        <!-- 模拟不是input的渲染组件-->
        <input v-model="tel"/>
          <!--有些时候，需要传递的数据，并不是input框，这个时候可以定义一个隐藏的input用于接收 -->
         <input type="hidden"   name="tel" />
        <
    </form>
<button  @click="toDownload"> 导出   </button>
   <!-- 用于打开下载窗口 -->
    <iframe name="downloadIframe" style="display:none" />
<div>
</template>
<script>
    export default {
        data(){
            return{
                userName:''，
                tel：''
            }
		},
        methods:{
            toDownload(){
                //这样就可以手动修改form表单的值
              document.getElementById("downForm").tel.value = this.tel
               document.getElementById("downForm").submit();
            } 
        }
    }