在一个新的选项卡中打开一个PDF，然后下载文件名为Angular的文件

Question

在Angular中，我需要在一个新的选项卡中打开一个PDF，并允许用户使用特定的名称下载它(Example.PDF(。下面的代码下载了PDF，但没有打开新的选项卡(target=_blank不起作用(。有什么办法解决这个问题吗？

show(blob){
var fileURL: any = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = fileURL;
a.target = '_blank';
a.download = "Example.pdf";
a.click();
}

Answer 1

如果您想在新选项卡中打开PDF，请不要设置下载属性。

public show(blob){
var fileURL: any = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = fileURL;
a.target = '_blank';
// Don't set download attribute
// a.download = "Example.pdf";
a.click();
}

然而，在新选项卡中，当用户尝试下载文件时，用户将看到随机字符串，而不是fileName。此处解释：https://stackoverflow.com/a/41947861/5171009

Answer 2

如果有人对不同的方法感兴趣，我使用下面的方法解决了这个问题。

服务代码：

fetchDocument(fileUrl) {
//pass document url to the service
return this.http.post(
`http://localhost:3000/mydocuments/${fileUrl}`,
{},
{
responseType: 'arraybuffer',
}
);
}

在组件ts文件中：

downloadPDF(content) {
//make a call to the service passing in document url
this.service.fetchDocument(fileUrl)
.subscribe(
(response: any) => {
let array = new Uint8Array(response);
//service returns an array buffer so convert array buffer to blob
let file = new Blob([array], { type: 'application/pdf' });
let fileURL = URL.createObjectURL(file);
window.open(fileURL);
},
(err) => {
console.error(err);
}
);
}