Blazor - 在新选项卡中打开 PDF 文件答案

【问题标题】：Blazor - Open PDF File in new TabBlazor - 在新选项卡中打开 PDF 文件
【发布时间】：2022-01-27 12:42:31
【问题描述】：

我想通过一个按钮打开一个 pdf 文档。这在 Blazor 中可能吗？感谢您的帮助

【问题讨论】：

Blazor 在浏览器上运行。您可以在浏览器上执行的任何操作都可以使用 Blazor 执行。这包括使用例如embed 标签或任何Javascript 查看器来显示PDF 文件。文件存储在哪里？在服务器上？客户？另一个网站？
这能回答你的问题吗？ How to display PDF file in HTML?
文件存储在服务器上。
我会试试的，谢谢:)

【解决方案1】：

请尝试此解决方案

这是你的 javascript 函数

function openFile(data) {
    var link = this.document.createElement('a');
    link.download = data.fileName;
    link.href = data.url;
    link.target ="_blank";
    this.document.body.appendChild(link);
    link.click();
    this.document.body.removeChild(link);
}

这是你的 razor 文件，用你的 pdf 下载 url 替换 url，点击按钮将在新的浏览器选项卡中打开 pdf

@inject IJSRuntime JS

<button @onclick=@(()=> JS.InvokeVoidAsync("openFile", new {fileName="anyfileName", url="http://anyurl.com"}))>Download PDF</button>

【讨论】：

【解决方案2】：

使用 HTML？

下载：

<a href=@PdfURL download>Download</a>

或

在新标签页中打开：

<a href=@PdfURL target="_blank">Open</a>

或

在当前选项卡中打开（即导航到它）：

<a href=@PdfURL>Open</a>?

【讨论】：