一、直接使用 <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});
}

归纳常见几种下载文件方式相关推荐

神奇 | 神奇，原来 Linux 终端下还有这两种下载文件方式
" Hi ! 我是小小,今天开始本周的第二篇,本周第二篇,将会着重讲解关于Linux下的两种文件下载方式. 前言如果你一直使用 Linux 终端,比如在服务器上,如何从终端下载文件,在本篇 ...
python下载文件的11种方式_Python 中常见的几种下载文件方法
下载比较小的文件: # 方法一:使用urllib库 # -*- coding:utf-8 -*- import urllib import time url = 'http://mvideo.spri ...
Linux| 向linux服务器上传下载文件方式收集(scp)
scp [优点]简单方便,安全可靠:支持限速参数 [缺点]不支持排除目录 [用法] scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式, ...
PHP中两种包含文件方式、三种注释风格、四种标记风格
2019独角兽企业重金招聘Python工程师标准>>> 一.两种包含文件的方式 ①require语法格式:require("文件名"):这个函数通常放在PHP程序 ...
各种下载文件方式总结
文件下载有多种方式,链接跳转方式下载,打开新页面下载,ajax下载文件. 以前ajax是不能下载文件的,现在的xhr2版本支持blob,可以将文件下载到内存中,然后弹出保存框,保存到本地. 这样不能下 ...
文件隐藏软件，6种保护文件方式，实现隐藏并锁定
今天推荐的是一款强大的文件隐藏工具,总共有6种保护文件的方式:不保护.隐藏.锁定.只读.隐藏并锁定以及密码.首先咱们需要设置一个主密码. 使用时直接拖拽要处理的文件夹到软件中,就会实现隐藏并锁定. 咱 ...
15种下载文件的方法
转载:https://blog.netspi.com/15-ways-to-download-a-file/ 瑞恩甘德鲁德原创时间:2014年6月16日 Pentesters经常将文件上传到受感染的 ...
LED常见5种调光方式比较
1.常见调光方式 1.前切相,可控硅调光 2.后切相MOS管调光 3.0/1-10V调光 4.DALI(数字可寻址照明接口) 5.DMX512(或DMX)调光 2.调光原理 1.前切向调光采用可控硅 ...
ASP.NET 下载文件方式
protected void Button1_Click(object sender, EventArgs e){/*微软为Response对象提供了一个新的方法TransmitFile来解决使用Re ...

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

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

一、直接使用 <a> 标签

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

常见文件说明

实现代码：

二、window.open、location.href实现

三、使用 iframe 下载

定义下载方法

调用下载方法

归纳常见几种下载文件方式相关推荐

最新文章

热门文章

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

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

一、直接使用 <a> 标签

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

常见文件说明

实现代码：

二、window.open、location.href实现

三、使用 iframe 下载

定义下载方法

调用下载方法

归纳常见几种下载文件方式相关推荐

最新文章

热门文章

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