Blazor WebAssembly中如何在pdf.js内使用base64流？

步骤1：确保项目引入pdf.js #

在Blazor项目的wwwroot/index.html（WebAssembly模式）或Pages/_Layout.cshtml（Server模式）中引入pdf.js核心脚本，建议将pdf.js包下载到本地wwwroot目录，避免依赖CDN：

<!-- 核心脚本 -->
<script src="pdfjs/build/pdf.min.js"></script>
<!-- Worker脚本，必须指定正确路径 -->
<script src="pdfjs/build/pdf.worker.min.js"></script>
<!-- 如需官方查看器，额外引入样式和查看器脚本 -->
<link rel="stylesheet" href="pdfjs/web/viewer.min.css">
<script src="pdfjs/web/viewer.min.js"></script>

步骤2：Base64转Uint8Array并加载PDF #

pdf.js无法直接解析Base64字符串，必须先将其转换为Uint8Array格式，以下是两种常用实现方案：

方案1：自定义渲染PDF页面

通过Blazor JS互操作，将C#端获取的Base64字符串传递给JS，手动渲染PDF页面：

Blazor组件代码（示例：PdfViewer.razor）

@inject IJSRuntime JSRuntime
<div id="pdf-render-container"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 模拟从后端或本地获取的PDF Base64字符串
            string pdfBase64 = "JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PC9MZW5ndGggNiAwIFIvRmlsdGVyIC9GbGF0ZURlY29kZT4+CnN0cmVhbQp4nE2NuwoCQQxF+/m...";
            await JSRuntime.InvokeVoidAsync("renderPdfFromBase64", pdfBase64, "pdf-render-container");
        }
    }
}

wwwroot/js/pdf-handler.js中的JS方法

async function renderPdfFromBase64(base64Str, containerId) {
    // 移除Base64前缀（如果存在）
    const pureBase64 = base64Str.replace(/^data:application\/pdf;base64,/, '');
    // 转换为Uint8Array
    const binaryStr = window.atob(pureBase64);
    const uint8Arr = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        uint8Arr[i] = binaryStr.charCodeAt(i);
    }

    // 初始化pdf.js
    const pdfLib = window['pdfjs-dist/build/pdf'];
    
    try {
        const pdfDoc = await pdfLib.getDocument(uint8Arr).promise;
        // 渲染第一页（可循环渲染所有页）
        const page = await pdfDoc.getPage(1);
        const viewport = page.getViewport({ scale: 1.2 });
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        document.getElementById(containerId).appendChild(canvas);
        
        await page.render({ canvasContext: ctx, viewport }).promise;
    } catch (err) {
        console.error('PDF加载失败:', err);
    }
}

方案2：使用pdf.js官方查看器

将Base64转换为Blob URL，直接传入官方查看器页面：

JS方法示例

async function openPdfViewer(base64Str) {
    const pureBase64 = base64Str.replace(/^data:application\/pdf;base64,/, '');
    const binaryStr = window.atob(pureBase64);
    const uint8Arr = new Uint8Array(binaryStr.length);
    for (let i = 0; i < binaryStr.length; i++) {
        uint8Arr[i] = binaryStr.charCodeAt(i);
    }

    // 创建Blob URL
    const pdfBlob = new Blob([uint8Arr], { type: 'application/pdf' });
    const blobUrl = URL.createObjectURL(pdfBlob);
    
    // 打开查看器页面
    window.open(`pdfjs/web/viewer.html?file=${encodeURIComponent(blobUrl)}`, '_blank');
    
    // 延迟释放Blob URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 30000);
}

关键注意事项 #

• 务必保证pdf.worker.min.js的路径正确，路径错误会导致PDF解析失败。
• 若Base64字符串包含data:application/pdf;base64,前缀，必须先移除再转换。
• 大体积PDF建议分块处理，避免一次性转换导致内存占用过高。

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