Blazor从SQL Server读取/查看PDF文件的解决方案求助

嘿，我明白你不想依赖JavaScript库来处理PDF查看的需求——下面有几个纯.NET/Blazor原生的方案，完全不用额外JS，应该能满足你的需求：

方案1：利用浏览器原生PDF渲染（最简单高效） #

这个方案直接借助现代浏览器自带的PDF查看器，不需要任何额外依赖，核心思路是通过API端点从SQL Server读取PDF字节流并返回，然后在Blazor组件里用<iframe>或<object>标签指向该端点。

步骤： #

1. 创建API端点读取PDF
   在你的ASP.NET Core项目中添加一个API控制器，负责从SQL Server读取PDF数据并返回文件流：

   [ApiController]
   [Route("api/pdf")]
   public class PdfController : ControllerBase
   {
       private readonly YourDbContext _dbContext;
   
       public PdfController(YourDbContext dbContext)
       {
           _dbContext = dbContext;
       }
   
       [HttpGet("{id}")]
       [Authorize] // 可选：如果需要权限验证
       public async Task<IActionResult> GetPdf(int id)
       {
           // 假设你的PDF实体是PdfFile，包含FileData（varbinary(max)）和FileName字段
           var pdfRecord = await _dbContext.PdfFiles.FindAsync(id);
           if (pdfRecord == null || pdfRecord.FileData == null)
           {
               return NotFound();
           }
   
           // 返回PDF流，指定MIME类型和文件名
           return File(pdfRecord.FileData, "application/pdf", $"{pdfRecord.FileName}.pdf");
       }
   }
   

2. 在Blazor组件中嵌入查看
   在Blazor页面里用<iframe>加载这个API端点，浏览器会自动渲染PDF：

   @page "/view-pdf/{id:int}"
   @inject NavigationManager NavManager
   
   <h3>查看PDF</h3>
   
   <iframe 
       src="@($"{NavManager.BaseUri}api/pdf/{id}")" 
       width="100%" 
       height="800px" 
       style="border: none;"
   >
       你的浏览器不支持直接查看PDF，请点击<a href="@($"{NavManager.BaseUri}api/pdf/{id}")">这里</a>下载文件。
   </iframe>
   

这个方案的优势是零额外依赖、性能高，浏览器会负责流式加载和渲染PDF，完美适配大部分现代浏览器。

方案2：将PDF转换为图片渲染（适合自定义场景） #

如果你需要对PDF做自定义处理（比如分页显示、添加水印），或者需要兼容不支持PDF的浏览器，可以用.NET PDF库将PDF页面转换为图片，然后在Blazor里显示图片。

步骤： #

1. 安装PDF处理库
   安装PdfSharpCore（.NET Core兼容的PDF处理库）：

   Install-Package PdfSharpCore
   

2. 在Blazor组件中处理PDF并渲染图片

   @page "/view-pdf-as-images/{id:int}"
   @inject YourDbContext DbContext
   
   <h3>PDF页面预览</h3>
   
   @if (_pdfPageImages.Any())
   {
       foreach (var imageBytes in _pdfPageImages)
       {
           <img 
               src="data:image/png;base64,@Convert.ToBase64String(imageBytes)" 
               style="width: 100%; margin-bottom: 1rem; border: 1px solid #eee;"
               alt="PDF页面"
           />
       }
   }
   else if (_isLoading)
   {
       <p>加载中...</p>
   }
   else
   {
       <p>未找到指定PDF或加载失败。</p>
   }
   
   @code {
       [Parameter] public int Id { get; set; }
       private List<byte[]> _pdfPageImages = new();
       private bool _isLoading;
   
       protected override async Task OnInitializedAsync()
       {
           _isLoading = true;
           try
           {
               var pdfRecord = await DbContext.PdfFiles.FindAsync(Id);
               if (pdfRecord != null && pdfRecord.FileData != null)
               {
                   using var pdfStream = new MemoryStream(pdfRecord.FileData);
                   using var document = PdfSharpCore.Pdf.IO.PdfReader.Open(pdfStream, PdfSharpCore.Pdf.IO.PdfDocumentOpenMode.Import);
   
                   foreach (var page in document.Pages)
                   {
                       using var imageStream = new MemoryStream();
                       var pageImage = PdfSharpCore.Drawing.XImage.FromPage(page);
                       pageImage.Save(imageStream, PdfSharpCore.Drawing.XImageFormat.Png);
                       _pdfPageImages.Add(imageStream.ToArray());
                   }
               }
           }
           catch (Exception ex)
           {
               // 处理异常，比如日志记录
               Console.WriteLine($"加载PDF失败：{ex.Message}");
           }
           finally
           {
               _isLoading = false;
           }
       }
   }
   

注意：这个方案会占用更多服务器内存（尤其是大PDF），建议对大文件做分页加载优化，或者只在必要时使用。

额外注意事项 #

• 确保SQL Server中PDF存储字段为varbinary(max)类型，避免编码问题。
• 如果需要权限控制，记得在API端点或Blazor组件中添加身份验证逻辑（比如[Authorize]属性）。
• 对于WebAssembly（WASM）Blazor，方案1同样适用，因为API端点是独立的，WASM可以正常请求。

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