Blazor WASM中使用EPPlus设置Excel背景图(水印)的路径问题
解决Blazor WASM中EPPlus设置Excel工作表背景图的问题
方案1:获取图片本地路径——不可行
Blazor WASM运行在浏览器沙箱环境中,完全无法访问本地文件系统的路径。wwwroot下的静态资源是通过HTTP协议提供的,不存在对应的本地驱动器路径(比如C:\xxx),因此这个思路根本无法实现,直接放弃即可。
方案2:通过字节数组/流设置Excel背景图
这是可行的解决方案,步骤如下:
1. 加载wwwroot中的图片为字节数组
利用Blazor WASM中的HttpClient请求本地静态资源(相对路径即可,无需完整URL),获取图片的字节数组。
2. 用EPPlus的SetFromStream方法设置背景图
EPPlus的ExcelWorksheetBackgroundImage提供了SetFromStream方法,支持通过流来设置背景图,正好适配我们获取到的图片字节数组(可转为MemoryStream)。
完整代码示例:
@inject HttpClient Http @inject IJSRuntime JSRuntime // 导出Excel的方法 private async Task ExportExcel(ExportModel exportModel) { // 1. 从wwwroot加载图片字节数组 var imageBytes = await Http.GetByteArrayAsync("images/Draft.png"); using (var package = new ExcelPackage()) { var sheet = package.Workbook.Worksheets.Add(exportModel.OSCode); // 2. 将字节数组转为内存流 using (var imageStream = new MemoryStream(imageBytes)) { // 3. 设置工作表背景图 sheet.BackgroundImage.SetFromStream(imageStream); } // 其他Excel内容处理逻辑... // 比如设置单元格数据、样式等 // 4. 导出Excel文件并触发浏览器下载 var excelStream = new MemoryStream(); package.SaveAs(excelStream); excelStream.Position = 0; // 调用JS实现文件下载(Blazor WASM中常用方式) var fileName = $"{exportModel.OSCode}_draft.xlsx"; await JSRuntime.InvokeVoidAsync("downloadFile", fileName, excelStream.ToArray()); } } // 配套的JS函数(可放在index.html中) // <script> // function downloadFile(fileName, byteArray) { // var blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // var url = URL.createObjectURL(blob); // var a = document.createElement('a'); // a.href = url; // a.download = fileName; // document.body.appendChild(a); // a.click(); // document.body.removeChild(a); // URL.revokeObjectURL(url); // } // </script>
关键说明
- 为什么之前用
SetFromFile报错?因为该方法仅支持读取本地文件系统的绝对路径,而Blazor WASM在浏览器中既没有本地文件访问权限,也无法将HTTP URL/相对路径映射为本地路径,因此必然报错。 - 如果已经有图片的字节数组(比如从其他渠道获取),可以直接跳过第一步,直接转成
MemoryStream传入SetFromStream即可。
内容的提问来源于stack exchange,提问作者Grandizer
相关产品推荐
相关产品推荐

