jQueryダウンロードファイル
Sheeraz Gul
2024年2月15日
このチュートリアルでは、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 メソッドを使用して、指定されたパスからファイルをダウンロードします。 出力を参照してください。
著者： Sheeraz Gul
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook