之前因為有自動下載的需求,所以研究了一下,在此記錄下來
該範例包含兩個功能,一個是透過模擬點擊的方式實現自動下載,另一個為動態生成文檔,可以依照需求使用
程式碼:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP32物聯網</title>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "微軟正黑體", "黑體-繁", sans-serif;
}
</style>
</head>
<body>
<div>
<p>File Test</p>
</div>
<div>
<textarea id="text-val" rows="4">Hello ESP32</textarea><br/>
<input type="button" id="dwn-btn" value="Download text file"/>
</div>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
//一秒後模擬點擊
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("dwn-btn").onclick();
}
// 其它瀏覽器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("dwn-btn").dispatchEvent(e);
}
}, 1000);
</script>
<script>
function download(filenaㄘme, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
// Generate download of hello.txt file with some content
var text = document.getElementById("text-val").value;
var filename = "hello.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
備註:
該區塊為自動點擊的JS
<script type="text/javascript">
//一秒後模擬點擊
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("dwn-btn").onclick();
}
// 其它瀏覽器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("dwn-btn").dispatchEvent(e);
}
}, 1000);
</script>
該區塊為將網頁上的文字輸入框的內容生成檔案,filename可以依照需求更改檔名
<script>
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
document.getElementById("dwn-btn").addEventListener("click", function(){
// Generate download of hello.txt file with some content
var text = document.getElementById("text-val").value;
var filename = "hello.txt";
download(filename, text);
}, false);
</script>
留言列表
