这在chrome和firefox中都不起作用。我想做的是获取discord服务器的徽标并让用户下载。我的python后端成功地完成了第一部分，所以我认为这不是问题所在。我下面的HTML代码中有一个链接中的下载按钮。一切都正常，只是我没有下载图片，而是转到了一个有链接的页面。我已经在这个网站上尝试了其他答案，但我找不到对我有用的东西。
我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap's CSS stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
<!-- My CSS stylesheet -->
<link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet" />
<title>Discord Profile Picture</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
</head>
<body class="text-white">
<div class="bg">
<div id="main">
<p class="roboto fifty">Discord server invite:</p>
<!-- Text Input using Bootstrap -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">
discord.gg/</span>
<input type="text" placeholder="XXXXXXXX" class="form-control" id="basic-url"
aria-describedby="basic-addon3" />
<button class="btn btn-outline-secondary" type="button" id="button-addon2" onClick="send()">
Send
</button>
</div>
<a id="download-link">
<button type="button" class="btn btn-outline-primary btn-lg">Download</button>
</a>
</div>
</div>
<!-- My JS Script -->
<script src="{{ url_for('static',filename='js/script.js') }}"></script>
<!-- Bootstrap's JS Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
</body>
</html>
我的JS:
function send() {
var data = {
invite: document.getElementById("basic-url").value
};
console.log("Sent.")
fetch("/scrape", {
headers: {'Content-Type': 'application/json',},
method: "POST",
body: JSON.stringify(data)
}).then(res => res.json()).then(data => {
downloadLink = document.getElementById("download-link")
downloadLink.style.display = "unset"; downloadLink.href = data; downloadLink.download = data
})
}
我的Python后端：
#!/usr/bin/env python3
from flask import Flask, render_template, request, jsonify
from bs4 import BeautifulSoup
import requests
app = Flask(__name__)
# Web Page
@app.route("/")
def hello():
return render_template('index.html')
# RESTful api endpoint
@app.route("/scrape", methods=["POST"])
def scrape():
code = request.get_json()["invite"]
invite = requests.get(f"https://discord.gg/{code}").text
soup = BeautifulSoup(invite, features="html.parser")
for meta_tag in soup.find_all("meta"):
try:
if meta_tag["property"] == "og:image":
return jsonify(meta_tag["content"]), 200
except KeyError:
pass
if __name__ == "__main__":
app.run(debug=True)
还有我的CSS
body, html { height: 100% }
/* Center everything */
#main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Roboto text */
p.roboto.fifty {
font-family : 'Roboto',
sans-serif;
font-size: 40px;
padding-left: 15px;
}
.parent { position: relative }
/* Full screen background */
#background-image {
height: 100%;
width: 100%;
}
/* Background */
.bg {
background-image: url("../images/background.png");
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#download-link {
padding-left: 35%;
display:none;
}
我认为应该使用downloadLink.setAttribute("download", data)而不是downloadLink.download = data。
应该可以