ホームページ > ウェブフロントエンド > jsチュートリアル > JSコードを使用してボタンをクリックしてファイルをダウンロードします

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

高洛峰
リリース: 2016-12-07 10:11:09
オリジナル
2442 人が閲覧しました

テキスト

ユーザーがクリックしてページ上の情報をダウンロードできるように、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) リクエストを取得

$(&#39;.download&#39;).click(function () {
var tt = new Date().getTime();
var url = &#39;http://192.168.1.231:8080/91survey/ws/excel/download&#39;;
/**
* 使用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) リクエストを投稿

$(&#39;.download&#39;).click(function(){
var tt =newDate().getTime();
var url = restUrl +&#39;/excel/download?userId=&#39;+ 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();//表单提交
});
ログイン後にコピー

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


関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート