HOWTO · jQuery
jQueryダウンロードファイル
このチュートリアルでは、jQuery を使用してファイルをダウンロードする方法を示します。
このチュートリアルでは、jQuery を使用してファイルをダウンロードする方法を示します。
jQueryダウンロードファイル
jQuery を使用して、JavaScript や HTML と同じ機能を持つファイルをダウンロードすることもできます。 jQuery で HTML アンカー タグを使用して、ファイルをダウンロードできます。
段階的なプロセスを見てみましょう。
-
最初に、HTML でソース
#を使用してアンカー タグを作成します。 -
ready()メソッドを作成して、DOM がロードされたときにダウンロードを実行できるようにします。 -
ready()メソッド内で、アンカー タグを対象とするclickイベントを作成します。 -
エラーを
preventDefaultに設定します。 -
最後に、アンカー タグの
hrefをダウンロードするファイルのパスに設定します。 -
システムを実行し、リンクをクリックします。 ファイルがダウンロードされます。
上記の手順に基づいて例を実装してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Downalod File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h1>Download File Using jQuery </h1>
<h3>Click the link do download the file..</h3>
<a id="download" href="#"> Download this file</a>
<script>
$(document).ready(function () {
$("#download").click(function (e) {
e.preventDefault();
window.location.href = "delftstack.docx";
});
});
</script>
<div>
</body>
</html>
上記のコードは、クリック時にファイルをダウンロードします。 出力を参照してください。
ご覧のとおり、window.location.href = "delftstack.docx"; を使用しました。 ダウンロードするファイルのパスを設定します。 ここで、attr() を使用して、属性 href をパスに設定することもできます。
別の例を参照してください。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Downalod File</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<div id = "Main">
<h1>Download File Using jQuery </h1>
<h3>Click the link do download the file..</h3>
<a id="download" href="#"> Download this file</a>
<script>
$(document).ready(function () {
$("#download").click(function (e) {
$("#download").attr({target: '_blank', href : "delftstack.docx"})
});
});
</script>
<div>
</body>
</html>
ここで、コードは attr メソッドを使用して、指定されたパスからファイルをダウンロードします。 出力を参照してください。
