如何从剃刀文件中显示pdf文件内容答案

【问题标题】：how can I show the pdf file content inside from razor file如何从剃刀文件中显示pdf文件内容
【发布时间】：2021-11-21 21:19:39
【问题描述】：

我从 word 创建了一个文档文件并导出为 pdf 。我想在剃刀页面的 Div 元素中显示 pdf 内容。如何从剃刀页面显示 pdf 内容。请您提供如何在 blazor 服务器端显示的示例代码

【问题讨论】：

Blazor 仍在浏览器上运行，在可以使用 JavaScript 的 HTML 页面中。您可以使用object 或embed 标记从很容易成为Web API 端点的URL 显示PDF 文件。如果您想要更高级的东西，您可以使用任何 JavaScript PDF 查看器库，例如 pdf.js
@PanagiotisKanavos 嵌入标签需要安装任何程序集？

标签： asp.net-core pdf blazor-server-side

【解决方案1】：

如果您将 pdf 文件直接存储在文档中，例如文件夹 wwwroot/pdf。
wwwroot/pdf/test.pdf

您可以使用以下 html 行显示此 PDF：
< embed src="pdf/test.pdf" style="width=100%; height=2100px;" />
它将为您提供一个带有打印选项的 pdf 显示器！

如果你想更进一步，上传你的文件然后显示它，我建议你去看看这个解释：
https://www.learmoreseekmore.com/2020/10/blazor-webassembly-fileupload.html
PDF 文件的上传与 Img 文件相同，您需要查看 IBrowserFile 文档。
您会看到它有一个 Size obj 和一个 OpenReadStream() 函数，可以帮助您获取文件（图像或 pdf）的显示 Url

如果网站关闭，这是上面显示的上传代码：

@code{
    List<string> imgUrls = new List<string>();
    private async Task OnFileSelection(InputFileChangeEventArgs e)
    {
        foreach (IBrowserFile imgFile in e.GetMultipleFiles(5))
        {
            var buffers = new byte[imgFile.Size];
            await imgFile.OpenReadStream().ReadAsync(buffers);
            string imageType = imgFile.ContentType;
            string imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
            imgUrls.Add(imgUrl);
        }
    }
}

此代码由我发现此有用代码的博客作者 Naveen Bommidi 编写

如果您愿意，如我所说，上传 PDF 然后显示它。
您可以使用相同的 html 行：
< embed src="@imgUrl" style="width=100%; height=2100px;" />
您上传的文件将会显示出来。

Example

【讨论】：

从 HTML5 嵌入？不需要安装任何程序集？
是 @Kiquenet ，从 HTML5 嵌入链接以获取有关“嵌入”标签的更多信息：w3schools.com/tags/tag_embed.asp 我不需要任何安装，只需在我的 html 中添加该行并将我的 pdf 文件添加到文件夹“wwwroot”