前端：文件下载功能

时间 2020-01-16

标签前端文件下载功能繁體版

原文原文链接

转载https://www.cnblogs.com/purple1/p/9106346.html
需求：页面上有一个下载按钮，点击后实行文件下载功能。html

方式一：使用window.open()jquery

方式二：使用form表单下载ajax

方式三：使用a标签，H5中有download属性npm

还能够使用第三方类库：npm install downloadjs浏览器

方式一：使用window.open()安全

var exportURL = "/moduleName/rest/exportdata?startDate=" + startDate + "&endDate=" + endDate;
    console.log(exportURL);
    ajaxWrapper(exportURL, function () {
        window.open(exportURL, "_blank");//打开一个新的窗口，调用下载的API
    }, function () {
        alert("Error");
        window.location.reload();
    });

方式一中存在一个问题：　下载文件时，能不能不打开新的窗口？（打开新的窗口须要设置浏览器：偏好设置->安全性，去掉阻止弹窗的复选框）app

方式二：使用form表单下载
a.html文件url

//须要引入jquery
<script src="./jquery-1.11.3.min.js"></script>
...
<div class="btn export" id="export">导 &nbsp;&nbsp;出</div>

//经过form 无需传递参数给后台
$('#export').click(function () {
var $eleForm = $("<form method='get'></form>");
$eleForm.attr("action", "your-url");
$(document.body).append($eleForm);
//提交表单，实现下载 
$eleForm.submit();
});

//经过form,需传递参数给后台时
$('#export').click(function () {
var $eleForm = $("<form id='exportFrom' method='get'></form>");
var $id = $("<input type='text' name='id' value='aa'/>");
var $token = $("<input type='text' name='token' value='12345'/>");
$eleForm.attr("action", "your-url");
$eleForm.prepend($id);  
$eleForm.prepend($token);       
$(document.body).append($eleForm);
$eleForm.submit();
})

注意：参数传递必须经过建立input输入框传递，而不是your-url?a=A&b=B这样的方式rest

方式三：使用a标签code

<div>
    <a href="zip/file-1.zip" download="test.zip">点击下载文件</a>
</div>