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:通过节点设置内容处置和内容类型似乎正在工作.我不得不问,这是正确的方法吗？

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

Answer 1

您可以将“Content-disposition：attachment”标头添加到提供文件的响应中。由于您的文件存储在 Azure Blob 存储中，因此您必须通过节点应用程序代理请求。

所以原来的代码应该改成这样：

$scope.fileURL = '<your-node-app-address>/myfile.pdf';

和

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

然后，您可以在节点应用程序中设置一条路由<your-node-app-address>/myfile.pdf，并附加正确的标头，例如：

var client = restify.createStringClient({ 
        url: 'https://myblob.blob.core.windows.net'
    });    
client.get('/8282020/myfile.pdf', function(err, req, res, data) {
            response.setHeader('Content-Disposition', 'attachment');
            response.writeHead(res.statusCode);
            response.write(data);
            response.end();
        });