ASP.NET MVC中实现点击按钮下载base64格式二维码图片的方法

是否需要将二维码内容存储到数据库？ #

完全不需要。你的二维码是基于文件Id实时生成的base64格式资源，本身体积很小，生成逻辑也非常轻量，存储到数据库只会无谓占用存储空间，每次需要的时候实时生成即可，没有任何性能负担。

实现下载的两种方案 #

方案1：纯前端实现（无需修改后端代码，最简单）

直接修改视图里的下载按钮代码，利用HTML5的download属性直接读取已加载的base64资源触发下载，把原来的下载按钮代码替换为：

<a href="@Model.QrUrl" download="@Model.Name_二维码.png" class="btn btn-success">Download QrCode</a>

download属性的值就是用户下载时的默认文件名，可按需调整格式。

如果担心部分老旧浏览器对base64直接作为a标签href的兼容性，可以搭配极简JS实现：
首先给按钮设置id：

<a href="javascript:;" id="downloadQrBtn" class="btn btn-success">Download QrCode</a>

然后在页面底部添加JS代码：

document.getElementById('downloadQrBtn').addEventListener('click', function() {
    const link = document.createElement('a');
    link.href = '@Model.QrUrl';
    link.download = '@Model.Name_二维码.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
});

方案2：后端新增下载接口（适合需要做下载统计、权限控制的场景）

首先在控制器中新增下载Action：

public async Task<IActionResult> DownloadQrCode(int Id)
{
    // 复用原有二维码生成逻辑
    string qrBase64 = CreateQrLink(Id).Replace("data:image/png;base64,", string.Empty);
    byte[] qrBytes = Convert.FromBase64String(qrBase64);
    var file = await context.Files.FindAsync(Id);
    return File(qrBytes, "image/png", $"{file.Name}_二维码.png");
}

再修改视图中的下载按钮绑定接口即可：

<a asp-controller="files" asp-action="DownloadQrCode" asp-route-id="@Model.Id" class="btn btn-success">Download QrCode</a>

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