归纳常见几种下载文件方式

项目中常常会遇到下载文件（json、xml、excel、pdf、音频、视频）的需求，不同的下载方案能呈现不同的效果，归纳项目中常见几种下载处理方案

一、直接使用 <a> 标签

实现起来非常简单，但是使用范围局限性强

<a> 标签 只能发送get请求

• href 属性的值是 后端文件下载接口地址
• download 属性的值是下载后的文件名（html5 增加）
• target="_black"在新页面打开，避免当前页闪屏

常见文件说明

• excel文件直接使用<a>标签href 即可下载，后台返回文件名
• json、img等文件会直接在浏览器打开，所以html5中增加 download属性。(对 视频、音频不起作用)

实现代码：

<a href="/getExcel?page=1" download="data.xsl" target="_black">点击下载</a>

二、window.open、location.href实现

直接请求资源，浏览器会自动更具后缀名 保存或者展示文件，定义点击调用方法即可

function downloadFile(url){
    window.open(url);
}

function downloadFile(url){
    location.href=url;
}

三、使用 iframe 下载

下载文件，无需打开新页面同时页面也不闪屏让用户无感，而且使用post请求，可以传输多个参数

定义下载方法

创建一个iframe和from的dom方法

function DownLoad(options) {

    var config = $.extend(true, { method: 'post' }, options);
    var $iframe = $('<iframe id="down-file-iframe" />');
    var $form = $('<form target="down-file-iframe" method="' + config.method + '" />');
    $form.attr('action', config.url);
    for (var key in config.data) {
    $form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');
     }
    $iframe.append($form);
    $(document.body).append($iframe);
    $form[0].submit();
    $iframe.remove();
}

调用下载方法

function loginDown(){
	//定义参数
	var url = "localhost:8080/api/statistics/down.do";
	var data = {
		parentId:$("#parentId").val(),
		groupId:$("#groupId").val(),
		startTime:vue.startTime,
		endTime:vue.endTime
	} ;
	//调用下载方法
	DownLoad({ 
		url:url,data:data
	});
}