如何使用 Azure Blob 创建 HTML 链接来下载链接

Question

我正在使用Azure Blobs创建一个网站来存储内容。该网站提供搜索和索引。

当此链接是相对的时，

<a download="" href="./media5/yyy.png">Download</a>

浏览器将启动“下载”。

当文件存储在斑点中时，用户获得了一个链接：

<a download="" href="https://xxx.blob.core.windows.net/media5/yyy.png">Download</a>

但是，此导航到图像。

我需要浏览器“下载”才能工作。

我已经尝试设置存储帐户的CORS刀片： ，

但这没有做任何事情。

Answer 1

在这种情况下，CORS不会有帮助。如果要强制下载斑点，请将BLOB的内容类型属性更改为application/ocket-stream（或application/application/binary）。

但是，请注意，当您将BLOB的内容类型更改为application/Octet-Stream时，它将始终下载。您将无法在浏览器中显示斑点。

Answer 2

Manrti是正确的CORS没有发挥作用。我删除了存储帐户的CORS刀片。

修复是3个部分：
1：将ContentDispoistion标题设置为“附加”

   var blockBlobClient = new BlockBlobClient(connectionString, container, fileInfo.Name, clientOptions);

        var uploadOptions = new BlobUploadOptions();
        uploadOptions.HttpHeaders = new BlobHttpHeaders();

        switch (fileInfo.Extension)
        {
            case ".wav":
                uploadOptions.HttpHeaders.ContentType = "audio/wav";
                break;
            case ".mp3":
                uploadOptions.HttpHeaders.ContentType = "audio/mpeg";
                break;
            case ".mp4":
                uploadOptions.HttpHeaders.ContentType = "video/mp4";
                break;
            case ".jpg":
                uploadOptions.HttpHeaders.ContentType = "image/jpeg";
                break;
            case ".png":
                uploadOptions.HttpHeaders.ContentType = "image/png";
                break;
            case ".zip":
                uploadOptions.HttpHeaders.ContentType = "application/x-zip-compressed";
                break;
            case ".html":
                uploadOptions.HttpHeaders.ContentType = "text/plain";
                break;
            case ".pdf":
                uploadOptions.HttpHeaders.ContentType = "application/pdf";
                break;
            default:
                break;
        }

        uploadOptions.HttpHeaders.ContentDisposition = "attached";
        uploadOptions.ProgressHandler = progressHandler;

        var contentMD5 = await GetContentMD5(blockBlobClient);
        var contentType = await GetContentType(blockBlobClient);

        using (var fs = fileInfo.Open(FileMode.Open, FileAccess.Read, FileShare.Read))
        {
            if ((sourceMD5 != contentMD5) | (contentType != uploadOptions.HttpHeaders.ContentType))
            {
                Console.WriteLine("\t\tUploading Blob...");
                await blockBlobClient.UploadAsync(fs, uploadOptions);
                contentMD5 = await GetContentMD5(blockBlobClient);
                if (sourceMD5 != contentMD5)
                {
                    throw new Exception($"Uploaded blob ContentMD5[{contentMD5}] does not match SourceMD5Hash[{sourceMD5}] for {blockBlobClient.Name}");
                }
            }
            return blockBlobClient;
        }

2：您必须使用SAS URL才能返回内容分配标题：

var uri = blobClient.GenerateSasUri(BlobSasPermissions.Read, new DateTimeOffset(DateTime.UtcNow.AddYears(2)));

3：HTML链接：

<a download="" href="https://xxx.blob.core.windows.net/media5/yyy.png?sv=2020-08-04&se=2024-04-08T14%3A43%3A28Z&sr=b&sp=r&sig=ZWdbpd8y2hr02MpzgxDC%2Fu2eqi5HukIYhXnLiYK4Rrk%3D">Download</a>