iframe 已加载正确的 src，但未下载 pdf

Question

我有一个 Angular v17 应用程序，我还有一个按钮，单击该按钮时将在下面的功能中触发，并且我有一个 pdf 的 url，该 url 在浏览器中正常加载 pdf，但我想通过单击开始下载使用 iframe 的按钮，然后将其从文档正文中删除，但它不起作用，当我单击按钮时没有任何反应，任何人都可以帮助解决问题吗？以及如何修复它？

 downloadInvoice(url: string): void {
if (isPlatformBrowser(this.platformId)) {
  const iframe = document.createElement('iframe');
  iframe.id = 'iframe-download';
  iframe.style.display = 'none';
  iframe.src = url;
  iframe.click();
  console.log(url);
  document.body.appendChild(iframe);
  iframe.onload = () => {
    console.log(document.getElementById('iframe-download'));
  };

  // iframe.onload = this.loadedIframe(iframe);
  // iframe.onload = () => {
  //setTimeout(() => document.body.removeChild(iframe), 5000);
  // };
  // iframe.onerror = () => {
  //   document.body.removeChild(iframe);
  // };
}

}

Answer 1

如果您的目标只是为用户提供一个单击按钮然后下载 PDF，最常见的方法是使用超链接（标签：a）。

这是一个例子：

downloadInvoice(url: string): void {
  if (isPlatformBrowser(this.platformId)) {
    const downloader = document.createElement("a");
    downloader.href = url;
    downloader.download = "invoice.pdf";
    downloader.click();
    downloader.remove();
  }
}

因此，当用户单击调用此功能的按钮时，浏览器将打开保存对话框以供他们保存

invoice.pdf

。”