javascript - 如何让用户看到正在下载的 Azure blob 存储文件，而不是在 Angular 的网络选项卡本身中下载完整的流

Question

我有一个下载按钮，用户单击该按钮可从 Azure Blob 存储下载媒体文件。我希望它可以立即下载，并且用户可以看到下载进度，但是在请求完成之前它不会下载。

正如您在上图中所见，下载流大约需要 30 秒，然后用户才能看到下载的文件。请有人指导我实现下图所示的行为

我正在使用 file-saver.js 在 Angular 中保存文件

this.downloadMediaService.downloadAsset(assetId).then((httpResponse) => {
        const {body: blob} = httpResponse;
        this.mediaBlob = blob;
        Filesaver.saveAs(blob, this.assetName);
      });
    }

标签： javascriptangularazureazure-blob-storage

Answer 1

如果想知道从 Azure blob 下载文件时下载了多少字节，可以使用 sdk@azure/storage-blob来实现。

例如

1. 安装sdk

npm install @azure/storage-blob
npm install crypto-js --save
npm install @types/crypto-js --save-dev

2. 代码

import {BlobServiceClient,AnonymousCredential,newPipeline } from '@azure/storage-blob';
import * as CryptoJS from 'crypto-js';
...



downlaod(){
 // genereate access token



const accountname =" storage account name";
  const key="storage account key";
  const start = new Date(new Date().getTime() - (15 * 60 * 1000));
  const end = new Date(new Date().getTime() + (30 * 60 * 1000));
const signedpermissions = 'rwdlac';
  const signedservice = 'b';
  const signedresourcetype = 'sco';
  const signedexpiry = end.toISOString().substring(0, end.toISOString().lastIndexOf('.')) + 'Z';
  const signedProtocol = 'https';
  const signedversion = '2018-03-28';



  const StringToSign =
      accountname + '\n' +
      signedpermissions + '\n' +
      signedservice + '\n' +
      signedresourcetype + '\n' +
       '\n' +
      signedexpiry + '\n' +
       '\n' +
      signedProtocol + '\n' +
signedversion + '\n';

var str =CryptoJS.HmacSHA256(StringToSign,CryptoJS.enc.Base64.parse(key));
var sig = CryptoJS.enc.Base64.stringify(str);




 const sasToken =`sv=${(signedversion)}&ss=${(signedservice)}&srt=${(signedresourcetype)}&sp=${(signedpermissions)}&se=${encodeURIComponent(signedexpiry)}&spr=${(signedProtocol)}&sig=${encodeURIComponent(sig)}`;
  const containerName="test";

            const pipeline =newPipeline (new AnonymousCredential(),{
            retryOptions: { maxTries: 4 }, // Retry options
            userAgentOptions: { userAgentPrefix: "AdvancedSample V1.0.0" }, // Customized telemetry string
            keepAliveOptions: {
                // Keep alive is enabled by default, disable keep alive by setting false
                enable: false
            }
            });

            const blobServiceClient =new BlobServiceClient(`https://${accountname}.blob.core.windows.net?${sasToken}`,
                                                             pipeline  )
            const containerClient =blobServiceClient.getContainerClient(containerName)
            const blob =containerClient.getBlockBlobClient("SampleVideo_1280x720_1mb.mp4")
           const r= await blob.getProperties()
           const totalSize = r.contentLength
             blob.download(null,null,{onProgress: (ev) => 


               console.log("You have download "+ ev.loadedBytes +" bytes\nThe process:"+ev.loadedBytes/totalSize ) }



              ).then(response =>  response.blobBody.then(b => {



console.log(b.size)
// save file
}))






}