JSコードを使用してボタンをクリックしてファイルをダウンロードします

テキスト

ユーザーがクリックしてページ上の情報をダウンロードできるように、Web ページにダウンロード ボタンを追加する必要がある場合があります。では、この機能を実現するにはどうすればよいでしょうか。ここには 2 つの方法があります:

次に、ページにダウンロード ボタンを追加する必要があります。ボタンをクリックしてファイルをダウンロードします。

余談ですが、このダウンロード アイコンは font-awesome から参照されています。使用する場合は、まずfont-awesomeフォルダーごとダウンロードするか、bowerを使用するか、公式Webサイトから自分でダウンロードします。

フォルダー全体をプロジェクトファイルに配置した後、CSSファイルをページに導入します

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

ページ上で必要なアイコンの使用を開始できます

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

1. プロジェクトをダウンロードしますファイル

Excel ファイル テンプレートをダウンロードする場合は、まずプロジェクト フォルダーの下にファイルを配置し、次に onclick イベントをページのダウンロード ボタンに追加します:

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

アイコンをクリックすると、ファイルは自動的にダウンロードされます。

2. ファイルをダウンロードするためにリクエストアドレスを送信します

JQueryのajax関数の戻り値の型はxml、text、json、htmlなどの型のみで、「stream」型は存在しないため、ajaxを実装したい場合はダウンロードの場合、対応する ajax ドキュメントのダウンロード機能は使用できません。ただし、js を使用してフォームを生成し、このフォームを使用してパラメーターを送信し、「ストリーム」タイプのデータを返すことができます。実装プロセス中、ページは更新されませんでした。

1) リクエストを取得

$('.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) リクエストを投稿

$('.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();//表单提交
});

完了後、ページ上のダウンロードアイコンをクリックすると、ファイルが自動的にダウンロードされます。