以下が実際のプログラムです。セキュリティ上の問題を考慮し、jQueryでAPI呼び出しとcsv変換を行っています。
```html
<!DOCTYPE html>
<html>
<head>
<title>Crawler</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
URL:<br>
<input type="text" name="url" id="url"><br>
Item 1:<br>
<input type="text" name="item1" id="item1"><br>
Item 2:<br>
<input type="text" name="item2" id="item2"><br>
Item 3:<br>
<input type="text" name="item3" id="item3"><br><br>
</form>
<button onclick="getCsv()">Download CSV</button>
<script>
function getCsv() {
var url = document.getElementById("url").value;
var item1 = document.getElementById("item1").value;
var item2 = document.getElementById("item2").value;
var item3 = document.getElementById("item3").value;
if (!url || !item1 || !item2 || !item3) {
alert("Please fill in all the fields.");
return;
}
$.ajax({
url: "https://api.allorigins.win/get?url=" + encodeURIComponent(url),
method: "GET",
dataType: "text",
success: function(response) {
var data = $(response).find(item1 + "," + item2 + "," + item3);
var csvData = "data:text/csv;charset=utf-8,";
csvData += "Item 1,Item 2,Item 3\n";
data.each(function() {
csvData += $(this).text().replace(/,/g, "") + "\n";
});
var encodedUri = encodeURI(csvData);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
link.innerHTML= "Download CSV";
document.body.appendChild(link);
link.click();
},
error: function(e) {
alert("Error: " + e.statusText);
}
});
}
</script>
</body>
</html>
```
ジョークとして、ダウンロードボタンを「CSVを掏り取る」というボタンに変えてみました。
