angular - 如何让浏览器根据可能的情况在新选项卡中下载或打开文件？ (并保留真实文件名)

Question

情况是这样的。在我的 Web 应用程序(Angular 前端/.Net Core 后端)中，我有一个页面，用户可以在其中单击文件(存储在服务器端)。当他这样做时，如果浏览器允许(例如:文本、图像、pdf...)，我希望文件直接在新选项卡中打开。如果不允许，浏览器应下载该文件。

我的 Angular 代码如下所示:

openFile(fileId: string, name: string) {
    this.httpClient.get('Attachments/Download/' + fileId, { responseType: 'arraybuffer', headers: { 'Content-Type': 'text/plain' }, observe: 'body' }).subscribe(file => {
        if (!file) {
            console.error("file not found.");
            return;
        }

        this.http.get<string>('File/MimeType/' + encodeURIComponent(name)).subscribe(mimetype => {
            if (!mimetype || mimetype === '') {
                console.error("mimetype not found.");
            } else {
                const blob = new Blob([file], { type: mimetype });
                const url = window.URL.createObjectURL(blob);
                window.open(url, '_blank');
            }
        });
    });
}

它运行良好，除了 window.URL.createObjectURL(blob)重命名 ID 为 blob:http://my-site/8b92c1b8-72e9-461c-b66c-40a65e705591 的文件(我想我明白为什么，我已经读过)。我现在也可以直接下载 <a>标记和 download attribute`(这里的名字可以，但是不能在浏览器中直接打开)。

我只希望浏览器在可能的情况下做出选择。我愿意接受任何建议。提前致谢。 :)

编辑:也可以随意提出任何仅使用后端(.Net Core)的解决方案，但它仍然需要在新选项卡中打开文件。

Answer 1

从 webapp 下载后，您不能真正强制它“打开文件”，或者至少不执行。但是我认为解决方案可能比您想象的要简单一些。既然你知道它是服务器上的一个文件，你就可以使用

window.open('https://path/to/file.extension', '_blank');

然后它将转到一个新选项卡并下载文件，如果您的浏览器有 pdf View ，它将显示它会下载。图片将按原样下载。