如何检索和显示（在浏览器中）多个pdf'；使用浏览器的JavaScript v12 SDK将存储在azure存储帐户中

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

我开始使用，这有一点帮助，但我无法确定我需要做什么来获得每个PDF的链接以显示在网站上

此时，我的JavaScript代码很简单，基本上遵循了快速入门。代码（listFiles函数）当前正确地显示了它应该显示的文件名，但我不知道如何获取它的href值。我一直在尝试在数据库中查找信息，但没有成功。还有另一篇stackoverflow文章对此进行了讨论，但没有提供足够的细节。以下是我的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);

const{BlobServiceClient}=require（“@azure/storage blob”）；
const main=document.getElementById（“main”）；
//使用Blob服务SAS URL字符串更新
const blobSasUrl=“”；
//创建新的BlobServiceClient
const blobServiceClient=新的blobServiceClient（blobssurl）；
//通过创建容器的唯一名称
//blob存储中已存在PDF容器
const containerName2=“PDF”；
//从BlobServiceClient获取容器客户端
const containerClient=blobServiceClient.getContainerClient（containerName2）；
const listFiles=async（）=>{
main.innerHTML=“”；
试一试{
让iter=containerClient.listBlobsFlat（）；
让blobItem=等待iter.next（）；
而（！blobItem.done）{
main.innerHTML+=`；
blobItem=等待iter.next（）；
}
}捕获（错误）{
console.log（错误消息）；
}
};
addEventListener（“加载”，列表文件）；

这里有两个选项：

您有一个SAS链接，我假设它是用于存储帐户或容器的，因为您可以从中列出blob。您的帐户如下所示

https://{storageaccountname}.blob.core.windows.net/？{keyinfo}

。特定文件的路径相同，但路径中包含容器和文件名<代码>https://{storageaccountname}.blob.core.windows.net/{containername}/{filename}？{keyinfo}

而不是href属性，而是一个使用blobClient在JS中生成下载的链接。这是一个有点干净，但它将有相同的最终结果，所以它是由你的喜好。您可以看到一个示例，其中包括这样做

代码摘要（也借用了一些答案）：

---

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

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);

const{BlobServiceClient，BlobClient}=require（“@azure/storage blob”）；
const main=document.getElementById（“main”）；
//使用Blob服务SAS URL字符串更新
const blobSasUrl=“”；
//创建新的BlobServiceClient
const blobServiceClient=新的blobServiceClient（blobssurl）；
const_connectionString=“”；
const_containerName=“PDF”；
//从BlobServiceClient获取容器客户端
const containerClient=blobServiceClient.getContainerClient（_containerName）；
const listFiles=async（）=>{
main.innerHTML=“”；
试一试{
让iter=containerClient.listBlobsFlat（）；
让blobItem=等待iter.next（）；
而（！blobItem.done）{
设_blobName2=blobItem.value.name；
让blobClient=新blobClient（_connectionString，_containerName，_blobName2）；
main.innerHTML+=`；
blobItem=等待iter.next（）；
}
}捕获（错误）{
console.log（错误消息）；
}
};
addEventListener（“加载”，列表文件）；

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);