如何使用 JavaScript v12 SDK for Browsers 检索和显示（在浏览器中）存储在 Azure 存储帐户中的多个 pdf 的 URL

Posted 2023-03-28

【中文标题】如何使用 JavaScript v12 SDK for Browsers 检索和显示（在浏览器中）存储在 Azure 存储帐户中的多个 pdf 的 URL

【英文标题】：How to retrieve and display (in browser) urls for multiple pdf's stored in an azure storage account using JavaScript v12 SDK for Browsers

【发布时间】：2020-12-22 01:33:40

【问题描述】：

我是 azure 的新手，并尝试循环访问存储帐户 > 容器以获取存储的每个 pdf 文档的 URL/URI。然后我希望将 URL 用作 href 标记的值，因此当用户单击链接时，它会在浏览器中显示 PDF 或下载它。我知道如何创建一个 href，但我不知道如何检索 pdf 的 URL。

我开始使用Quickstart: Manage blobs with javascript v12 SDK in a browser，这有点帮助，但我无法确定我需要做什么才能获得每个 PDF 的链接以显示在网站上。

此时我的 JavaScript 代码很简单，并且几乎遵循快速入门。代码（listFiles 函数）当前正确显示文件名，但我不知道如何获取它的 href 值。我一直在尝试在SDK docs 中查找信息，但没有成功。还有另一篇***文章谈到了它，但没有提供足够的细节。这是我的 JavaScript 代码：

index.js

const  BlobServiceClient  = require("@azure/storage-blob");
const main = document.getElementById("main");

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<myblobservicesasurlstring>";

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);

// Create a unique name for the container by 
// pdfs container already exists in blob storage
const containerName2 = "pdfs";

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName2);

const listFiles = async () => 
    main.innerhtml = "";
    try 
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) 
            main.innerHTML += `<a href='$blobItem.uri'>$blobItem.value.name</a>`;
            blobItem = await iter.next();
        
     catch (error) 
        console.log(error.message);
    
;

window.addEventListener("load", listFiles);

【参考方案1】：

你有两个选择：

您有一个 SAS 链接，我假设它是用于存储帐户或容器的，因为您可以从中列出您的 blob。您的帐户看起来像这样https://storageaccountname.blob.core.windows.net/?keyinfo。特定文件的文件名相同，但路径中包含容器和文件名。 https://storageaccountname.blob.core.windows.net/containername/filename?keyinfo

而不是 href 属性，而是使用您的 blobClient 在 JS 中生成下载的链接。它更干净一些，但最终结果相同，因此取决于您的喜好。您可以查看包含执行此操作的示例here。

代码总结（也借用一点this的回答）：

const blockBlobClient = containerClient.getBlockBlobClient(blobName);
const downloadBlockBlobResponse = await blockBlobClient.download(0);
const data = await downloadBlobResponse.blobBody;

// Saves file to the user's downloads directory
saveAs(data, blobName); // FileSaver.js

【参考方案2】：

这是我为解决问题所做的，它可能不是最直接的方法，但它有效：

const  BlobServiceClient, BlobClient  = require("@azure/storage-blob");

const main = document.getElementById("main");

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<MyBlobServiceSASURL>";

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);
const _connectionString = "<myconnectionstring>";
const _containerName = "pdfs";

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(_containerName);

const listFiles = async () => 
    
    main.innerHTML = "";
    try 
        
        let iter = containerClient.listBlobsFlat();
        
        let blobItem = await iter.next();
        
        while (!blobItem.done) 
            
            let _blobName2 = blobItem.value.name;
            let blobClient = new BlobClient(_connectionString, _containerName, _blobName2);
            
            main.innerHTML += `<div><a href='$blobClient.url'>$blobItem.value.name</a></div>`;
            blobItem = await iter.next();
        
     catch (error) 
        console.log(error.message);
    
;


window.addEventListener("load", listFiles);