Blazor Server中通过下载链接将Razor组件保存为JPG/PNG/PDF的实现方案问询

要实现和浏览器当前渲染状态完全一致的组件导出，纯C#服务端方案无法直接满足需求——服务端只能获取组件的静态渲染结果，无法捕获用户在客户端操作后的动态状态（比如填写的表单值、展开的折叠面板、切换的标签页等）。最优方案是结合 Blazor JS互操作 + 前端DOM截图库 实现，完全支持仅导出目标组件、效果和浏览器显示完全一致的要求。
如果你的目标组件是完全静态无交互的，也可以使用纯C#服务端方案：先把组件渲染为HTML字符串，再用SkiaSharp、iTextSharp等库转为图片或PDF，仅适合静态场景。

步骤1：引入前端依赖 #

将html2canvas（处理图片生成）和jsPDF（处理PDF生成）的JS源码下载到本地，放到Blazor Server项目的wwwroot/js目录下，在项目的入口布局文件（_Host.cshtml/App.razor）中引入这两个脚本。

步骤2：给目标组件加唯一标识 #

在需要导出的Razor组件的根元素上绑定唯一ID，方便JS定位目标元素，避免命中父组件内容：

<!-- 目标组件根元素，仅该元素及其子元素会被导出 -->
<div id="export-target-component">
    @* 组件的所有子内容 *@
    <ChildComponent1 />
    <ChildComponent2 />
</div>

步骤3：编写前端导出逻辑 #

在公共JS文件或者布局页的<script>标签中添加导出函数：

// 导出为JPG/PNG图片
async function exportAsImage(format, fileName) {
    const target = document.getElementById('export-target-component');
    // 生成组件对应的canvas
    const canvas = await html2canvas(target, {
        useCORS: true, // 处理组件内的跨域图片资源
        scale: window.devicePixelRatio // 保证导出清晰度和屏幕显示一致
    });
    // 触发下载
    const link = document.createElement('a');
    link.download = `${fileName}.${format}`;
    link.href = format === 'png' 
        ? canvas.toDataURL('image/png') 
        : canvas.toDataURL('image/jpeg', 0.95);
    link.click();
}

// 导出为PDF
async function exportAsPdf(fileName) {
    const target = document.getElementById('export-target-component');
    const canvas = await html2canvas(target, {
        useCORS: true,
        scale: 2 // 提升PDF导出清晰度
    });
    const imgData = canvas.toDataURL('image/png');
    // 按组件尺寸生成PDF
    const pdf = new jspdf.jsPDF({
        orientation: canvas.width > canvas.height ? 'landscape' : 'portrait',
        unit: 'px',
        format: [canvas.width, canvas.height]
    });
    pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
    pdf.save(`${fileName}.pdf`);
}

步骤4：Blazor端触发导出 #

在添加下载链接的组件中注入IJSRuntime，绑定点击事件调用上述JS函数：

@inject IJSRuntime JSRuntime

<!-- 下载入口 -->
<div class="export-btns">
    <button @onclick="() => HandleExport('png', '组件导出')">下载PNG</button>
    <button @onclick="() => HandleExport('jpg', '组件导出')">下载JPG</button>
    <button @onclick="() => HandleExport('pdf', '组件导出')">下载PDF</button>
</div>

<!-- 目标导出组件 -->
<div id="export-target-component">
    <YourTargetComponent />
</div>

@code {
    private async Task HandleExport(string format, string fileName)
    {
        if (format == "pdf")
        {
            await JSRuntime.InvokeVoidAsync("exportAsPdf", fileName);
        }
        else
        {
            await JSRuntime.InvokeVoidAsync("exportAsImage", format, fileName);
        }
    }
}

• 如果组件内包含跨域图片资源，需要给对应资源配置CORS跨域头，否则html2canvas会出现截图空白的问题
• 若目标组件有滚动条，导出前可以临时将组件的overflow属性设为visible，截图完成后再恢复，即可导出完整的滚动内容
• 该方案导出的内容完全对应客户端实时渲染的DOM状态，所有用户操作产生的动态变化都会同步到导出文件中，且仅会导出指定ID的组件内容，不会包含上层父组件

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