Verwenden Sie JS-Code, um Dateien herunterzuladen, indem Sie auf die Schaltfläche klicken

Text

Manchmal müssen wir einen Download-Button auf der Webseite hinzufügen, damit Benutzer darauf klicken können, um die Informationen auf der Seite herunterzuladen. Hier gibt es zwei Methoden:

Jetzt müssen Sie einen Download-Button auf der Seite hinzufügen und auf den Button klicken, um die Datei herunterzuladen.

Off-Topic, auf dieses Download-Symbol wird oben von „font-awesome“ verwiesen. Wenn Sie es verwenden, laden Sie zunächst den gesamten Ordner „font-awesome“ herunter, verwenden Sie Bower oder laden Sie es selbst von der offiziellen Website herunter.

Nachdem Sie den gesamten Ordner in der Projektdatei abgelegt haben, führen Sie die CSS-Datei auf der Seite ein

<link href="libs/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

auf der Seite Sie können mit der Verwendung der benötigten Symbole beginnen

<i class="fa fa-download" aria-hidden="true" title="下载"></i>

1 Laden Sie die Dateien im Projekt herunter

Wenn Sie möchten Herunterladen Für eine Excel-Dateivorlage können Sie die Datei zunächst im Projektordner ablegen und dann das Onclick-Ereignis auf der Download-Schaltfläche der Seite hinzufügen:

<i class="fa fa-download" aria-hidden="true" title="下载" onclick="window.open(&#39;file/user.xlsx&#39;)"></i>

Auf diese Weise Nach dem Klicken auf das Symbol wird die Datei automatisch heruntergeladen.

2. Senden Sie die Anforderungsadresse, um die Datei herunterzuladen

Der Rückgabetyp der Ajax-Funktion von JQuery ist nur XML, Text, JSON, HTML und andere Typen, und es gibt keinen „Stream“-Typ Daher müssen wir den Ajax-Download implementieren. Die entsprechende Ajax-Funktion kann nicht zum Herunterladen von Dateien verwendet werden. Sie können jedoch js verwenden, um ein Formular zu generieren, dieses Formular zum Senden von Parametern verwenden und Daten vom Typ „Stream“ zurückgeben. Während des Implementierungsprozesses wurde die Seite nicht aktualisiert.

1) Anfrage erhalten

$('.download').click(function () {
var tt = new Date().getTime();
var url = 'http://192.168.1.231:8080/91survey/ws/excel/download';
/**
* 使用form表单来发送请求
* 1.method属性用来设置请求的类型——post还是get
* 2.action属性用来设置请求路径。
*
*/
var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","get"); //请求类型
form.attr("action",url); //请求地址
$("body").append(form);//将表单放置在web中
　　/**
* input标签主要用来传递请求所需的参数：
*
* 1.name属性是传递请求所需的参数名.
* 2.value属性是传递请求所需的参数值.
*
* 3.当为get类型时，请求所需的参数用input标签来传递，直接写在URL后面是无效的。
* 4.当为post类型时，queryString参数直接写在URL后面，formData参数则用input标签传递
* 有多少数据则使用多少input标签
*
　　　*/
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","tt");
input1.attr("value",tt);
form.append(input1);
var input2=$("<input>");
input2.attr("type","hidden");
input2.attr("name","companyId");
input2.attr("value",companyId);
form.append(input2);
form.submit();//表单提交
})

2) Anfrage posten

$('.download').click(function(){
var tt =newDate().getTime();
var url = restUrl +'/excel/download?userId='+ userId;
var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");//请求类型
form.attr("action",url);//请求地址
$("body").append(form);//将表单放置在web中
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","tt");
input1.attr("value",tt);
form.append(input1);
var input2=$("<input>");
input2.attr("type","hidden");
input2.attr("name","companyId");
input2.attr("value",companyId);
form.append(input2);
form.submit();//表单提交
});

Klicken Sie nach Abschluss auf das Download-Symbol auf der Seite und die Datei wird automatisch heruntergeladen.