Blazor使用PDFObject预览pdf文件
Blazor和JavaScript可以互操作,因此可以使用PDFObject预览pdf文件。实现步骤如下:
- 添加script.js文件,调用PDFObject函数预览后端返回的文件Stream
import "./libs/pdfobject.js"; export async function showPdf(id, stream) { const arrayBuffer = await stream.arrayBuffer(); const blob = new Blob([arrayBuffer], { type: 'application/pdf' });//必须要加type const url = URL.createObjectURL(blob); PDFObject.embed(url, '#' + id, { forceIframe: true });//只有iframe可以打开blob链接 URL.revokeObjectURL(url); }
- 添加JsInterop.cs文件,
public class JsInterop : IAsyncDisposable { private readonly Lazy<Task<IJSObjectReference>> moduleTask; public JsInterop(IJSRuntime jsRuntime) { moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>( "import", "./_content/XXX/script.js").AsTask()); //XXX为Razor类库名称 } public async void ShowPdf(string id, Stream stream) { var module = await moduleTask.Value; using var streamRef = new DotNetStreamReference(stream); await module.InvokeVoidAsync("showPdf", id, streamRef);//showPdf与script中的方法名一致 } }
- 添加PdfFile.razor文件
@inject JsInterop Js <div id="pdf" class="tc-pdf"></div> @code { protected override void OnInitialized() { base.OnInitialized(); var stream = Service.GetPdfFile(); Js.ShowPdf("pdf", stream); } }
参考资料:
分类:
03 .NET技术
, 16 Javascript
Known 是基于 Blazor 轻量级、跨平台、低代码、易扩展的插件开发框架。
源码:https://gitee.com/known/Known
源码:https://github.com/known/Known
如果对您有帮助,点击⭐Star⭐关注 ,感谢支持开源!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战