HTML 下载属性不起作用：充当普通链接

Question

This dosen't work in chrome nor firefox.这在 chrome 和 firefox 中都不起作用。 What I'm trying to do is get the logo of a discord server and let the user download it.我想要做的是获取不和谐服务器的徽标并让用户下载它。 My python backend succesfully did the first part, so I don't think that's the problem.我的 python 后端成功地完成了第一部分，所以我认为这不是问题所在。 My HTML code below has the download button inside a link.我下面的 HTML 代码在链接中包含下载按钮。 Everything works, except instead of downloading the image I just get to a page with the link.一切正常，除了我没有下载图像，而是进入带有链接的页面。 I've tried the other answers on this site, but I could not find something that worked for me.我已经在这个网站上尝试了其他答案，但我找不到对我有用的东西。

My 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>

My JS:我的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
    })

}

My Python backend:我的 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)

And my CSS还有我的 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;
}

Answer 1

I think you should use downloadLink.setAttribute("download", data) instead of downloadLink.download = data .我认为您应该使用downloadLink.setAttribute("download", data)而不是downloadLink.download = data 。

that should work那应该工作

HTML 下载属性不起作用：充当普通链接

问题描述

1 个解决方案

解决方案1
1 2021-11-14 15:40:41

HTML 下载属性不起作用：充当普通链接

问题描述

1 个解决方案

解决方案1 1 2021-11-14 15:40:41

解决方案1
1 2021-11-14 15:40:41