node.js - AngularJS 强制 Firefox/Safari 下载文件而不是在浏览器中打开

Question

我有一个 PDF 文件，可以在除 Firefox/Safari 之外的所有浏览器上下载。它在浏览器窗口中打开它，而不是下载文件。我的网站在 Node.js 之上运行并托管在 Azure 中。用户下载的文件来自 Azure blob 存储，因此我怀疑这可能是 CORS 问题。

这是我的下载客户端代码:

<a href="{{fileURL}}" class="btn btn-default" download="myfile.pdf">Download File</a>

这是服务器端代码:

$scope.fileURL = 'https://myblob.blob.core.windows.net/8282020/myfile.pdf';

更新:我可以根据下面的帮助通过在 Azure 中设置 blob 属性来添加内容配置，并且该配置将显示为“附件”，但在 FireFox/Safari 中它仍然是在浏览器中打开。由于 Azure Blob 存储可能被视为 CORS，这是否可能被阻止？

更新 2: 将以下内容添加到我的 HTML 标记中似乎可以在 FireFox 中使用(但不能在 Safari 中使用)，这是跨浏览器处理此问题的正确方法吗

type="application/octet-stream"

更新 3: 通过 Node 设置内容处置和内容类型似乎有效。我想问一下，这样的方法对吗？

blobSvc.setBlobProperties(containerName, filename, { contentDisposition: 'attachment', contentType: 'application/octet-stream' }, function (error, result, response) {
// result code here....
})

Answer 1

通常，我们可以将 blob 的 Content-Disposition 设置为 attachment 来指示用户代理不应显示响应，而是显示“另存为”对话框文件名不是指定的 blob 名称。 您可以引用Set Blob Properties了解更多信息。

Can I set the disposition on initial upload? I am using Node/JavaScript: blobSvc.createBlockBlobFromLocalFile('mycontainer', 'myblob', 'test.txt', function(error, result, response){ if(!error){ // file uploaded } });

在我的测试中，我必须在 Azure 存储中创建 Blob 后setBlobProperties，才能成功设置 Blob 的Content-Disposition。

EG

blobsrv.createBlockBlobFromLocalFile('mycontainer', 'Azure.pdf', 'upload/Azure.pdf', function (error, result, response) {

        if (error) res.send(500);
        blobsrv.setBlobProperties('mycontainer', 'Azure.pdf', { contentDisposition: 'attachment' }, function (error, result, response) {
            res.send(200, JSON.stringify(response));
        })
    });

在我的测试中，Angular 前端将下载该文件，而不是直接在 FireFox 浏览器中打开它。

<a href="{{pdfurl}}" download="Azure.pdf">Azure.pdf</a>
$scope.pdfurl = "http://<cantainer>.blob.core.windows.net/mycontainer/Azure.pdf";