Blazor Server-Side：在Razor页面展示wwwroot外PDF文件的方法

因为非wwwroot目录的文件无法直接通过静态URL访问，你需要通过后端API读取文件并返回流，再在Blazor页面中调用这个API来渲染PDF，同时可以添加权限控制确保文件安全。

步骤1：创建后端API端点 #

创建一个API控制器（或使用Minimal API），负责读取UploadedFiles文件夹中的PDF并返回文件流，同时添加权限验证：

控制器示例代码 #

using Microsoft.AspNetCore.Mvc;
using System.IO;

[ApiController]
public class FileController : ControllerBase
{
    private readonly IWebHostEnvironment _webHostEnv;

    public FileController(IWebHostEnvironment webHostEnv)
    {
        _webHostEnv = webHostEnv;
    }

    [HttpGet("api/file/pdf/{fileName}")]
    [Authorize] // 按需添加授权，确保只有合法用户能访问
    public IActionResult GetPdfFile(string fileName)
    {
        // 构建文件路径，严格限制在UploadedFiles目录内，防止路径遍历攻击
        var baseUploadPath = Path.Combine(_webHostEnv.ContentRootPath, "UploadedFiles");
        var safeFilePath = Path.GetFullPath(Path.Combine(baseUploadPath, fileName));

        // 验证文件是否在目标目录内，避免恶意路径
        if (!safeFilePath.StartsWith(baseUploadPath, StringComparison.OrdinalIgnoreCase))
        {
            return BadRequest("Invalid file path");
        }

        if (!System.IO.File.Exists(safeFilePath))
        {
            return NotFound("File not found");
        }

        // 在这里添加自定义权限检查（比如验证当前用户是否有权限访问该文件）
        // bool userHasAccess = CheckUserAccess(User, fileName);
        // if (!userHasAccess) return Forbid();

        var fileStream = new FileStream(safeFilePath, FileMode.Open, FileAccess.Read);
        return File(fileStream, "application/pdf", fileName);
    }
}

步骤2：在Blazor页面中渲染PDF #

在showFile.razor页面，使用<embed>或<iframe>元素调用上述API，展示PDF内容：

showFile.razor示例代码 #

@page "/showfile"
@inject HttpClient HttpClient

<div class="pdf-container">
    <h3>PDF预览</h3>
    <!-- 动态传入文件名，这里示例为"document.pdf"，可根据实际场景从参数/状态获取 -->
    <embed 
        src="@($"api/file/pdf/document.pdf")" 
        type="application/pdf" 
        width="100%" 
        height="800px"
        alt="无法加载PDF文件"
    />
</div>

<style>
    .pdf-container {
        padding: 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }
</style>

关键注意事项 #

• 路径安全：必须验证文件路径，确保请求的文件确实在UploadedFiles目录内，避免路径遍历攻击。
• 权限控制：务必添加[Authorize]特性或自定义权限检查逻辑，防止未授权用户访问敏感文件。
• 流处理：ASP.NET Core的File方法会自动处理文件流的释放，无需手动调用Dispose。
• 兼容性：<embed>和<iframe>在大部分现代浏览器中都支持PDF渲染，若需要更复杂的功能（比如分页、标注），可以考虑使用pdf.js库。

内容的提问来源于stack exchange，提问作者Jeremy