如何在HTML代码中使用Python变量动态设置下载文件名

方案1：Python Web框架模板渲染（动态网站场景） #

如果你使用Flask、Django这类Python Web框架搭建网站，直接用模板变量占位替换即可，以Flask为例：

• 后端Python代码：

from pytube import YouTube
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/download')
def download_page():
    yt = YouTube("https://www.youtube.com/watch?v=6BYIKEH0RCQ")
    # 可提前过滤非法文件名字符，避免下载异常
    import re
    name = re.sub(r'[\\/:*?"<>|]', '', yt.title)
    # 将歌名变量传给前端模板
    return render_template("download.html", song_name=name)

• 前端模板download.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download</title>
</head>
<body>
    <a href="Sample.mp3" download="{{ song_name }}"><button>Click here </button></a>
</body>
</html>

原理：服务端渲染模板时会自动把{{ song_name }}占位符替换成实际歌名，用户拿到的最终HTML里的download属性就是正确值。

方案2：静态生成HTML文件（无动态服务场景） #

如果你不需要运行动态Web服务，只需要生成可直接部署的静态HTML，直接用Python字符串替换生成文件即可：

from pytube import YouTube
import re

# 拿到并处理歌名
yt = YouTube("https://www.youtube.com/watch?v=6BYIKEH0RCQ")
name = re.sub(r'[\\/:*?"<>|]', '', yt.title)

# 定义HTML模板，用{}做占位符
html_template = '''<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download</title>
</head>
<body>
    <a href="Sample.mp3" download="{}"><button>Click here </button></a>
</body>
</html>'''

# 替换占位符后写入本地HTML文件
final_html = html_template.format(name)
with open("download.html", "w", encoding="utf-8") as f:
    f.write(final_html)

原理：直接在Python中拼接生成完整HTML代码，插入歌名后导出静态文件，直接部署该文件即可生效。

方案3：前后端分离场景 #

如果你的前端是单独部署的静态页面，Python只提供接口服务，可以让前端调用接口拿到歌名后动态修改属性：

• 后端Python接口示例（Flask）：

from pytube import YouTube
from flask import Flask, jsonify
from flask_cors import CORS # 跨域支持，按需引入
import re

app = Flask(__name__)
CORS(app) # 按需开启跨域

@app.route('/get_song_name')
def get_song_name():
    yt = YouTube("https://www.youtube.com/watch?v=6BYIKEH0RCQ")
    name = re.sub(r'[\\/:*?"<>|]', '', yt.title)
    return jsonify({"song_name": name})

• 前端HTML+JS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download</title>
</head>
<body>
    <a id="downloadLink" href="Sample.mp3" download="Song_name"><button>Click here </button></a>
    <script>
        // 页面加载时调用接口获取歌名
        fetch("你的后端接口地址/get_song_name")
            .then(res => res.json())
            .then(data => {
                // 动态修改download属性
                document.getElementById("downloadLink").setAttribute("download", data.song_name)
            })
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Chirag Singh