如何显示 razor 文件中的 pdf 文件内容

Question

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

Answer 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-web
assembly-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;" />
并且您上传的文件将被显示。

例子