javascript - 如何下载带有文件名的文件？

Question

几周来我一直在为一个问题苦苦思索。

我向客户端提供一个下载 URL，以便从存储中下载内容。我是这样做的:

  var sasConstraints = new SharedAccessBlobPolicy();
  sasConstraints.SharedAccessStartTime = DateTime.UtcNow.AddMinutes(-5);
  sasConstraints.SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(10);
  sasConstraints.Permissions = SharedAccessBlobPermissions.Read;
  var sasBlobToken = blob.GetSharedAccessSignature(sasConstraints);

通过这种方式，我可以生成指向 Azure 存储 blob 的链接。

现在我将此链接发送给客户端并将其打开为:

  let a = document.createElement('a');
  a.download = data.fileName;
  a.href = data.url
  a.click()
  document.removeChild(a)

但它仍然不会下载具有正确文件名的文件(它会将其下载为 blob 的 GUID)。发生这种情况是因为 azure 存储覆盖了我在 download 属性中指定的名称的 header 。如何获得要传送的正确文件名？我应该尝试禁用 Azure 存储的 header 吗？我应该更改客户端上的代码吗？

Answer 1

假设您有一个名为 abc.png 的 Blob，并且希望将其下载为 def.png，您可以做的就是覆盖 Content-Disposition SAS token 中的 header 。然后，当用户单击下载链接时，文件将默认保存为 def.png。

请参阅下面的示例代码:

    private static void OverrideContentDispositionHeaderInSharedAccessSignature()
    {
        var cred = new StorageCredentials(accountName, accountKey);
        var account = new CloudStorageAccount(cred, true);
        var blobClient = account.CreateCloudBlobClient();
        var container = blobClient.GetContainerReference("container-name");
        var blob = container.GetBlockBlobReference("abc.png");
        var sasConstraints = new SharedAccessBlobPolicy();
        sasConstraints.SharedAccessStartTime = DateTime.UtcNow.AddMinutes(-5);
        sasConstraints.SharedAccessExpiryTime = DateTime.UtcNow.AddMinutes(10);
        sasConstraints.Permissions = SharedAccessBlobPermissions.Read;
        var sasBlobHeaders = new SharedAccessBlobHeaders()
        {
            ContentDisposition = "attachment; filename=\"def.png\""
        };
        var sasBlobToken = blob.GetSharedAccessSignature(sasConstraints, sasBlobHeaders);
        var sasUrl = blob.Uri.AbsoluteUri + sasBlobToken;
    }

使用此功能，您无需在链接元素上设置 download 属性。您的客户端代码会非常简单。像这样的东西:

        let a = document.createElement('a');
        a.href = data.url
        a.click()
        document.removeChild(a)