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' });//必须要加typeconst 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);}
}

参考资料：

ASP.NET Core Blazor 文件下载 | Microsoft Docs

javascript - Embed a Blob using PDFObject - Stack Overflow

Blazor使用PDFObject预览pdf文件相关推荐

springboot整合pdfobject 预览pdf文件出现 Not allowed to load local resource : file:///c:/xxxx.pdf 报错的问题解决
浏览器不允许直接访问本地文件解决:设置springboot虚拟目录 @Configuration public class WebMvcConfig extends WebMvcConfigurer ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
如何在html中在线预览pdf文件？
方法1:使用 jquery js 库 1.引入 jquery-3.1.1.min.js 和 jquery.media.js 两个js文件,下载保存到本地下载连接:jquery-3.1.1.min.j ...
html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
关于Android 在线预览PDF文件
本篇文章大部分为转载内容,不过最后有我自己使用后的小总结,原文地址:https://www.jianshu.com/p/9e3ff8385e6f Android PdfViewer: 项目地址: ht ...
android 在线预览pdf文件
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 1.andorid原生自带的pdf管理库,主要提供 ...
android 在线预览pdf文件（目前最全）
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供 ...

Blazor使用PDFObject预览pdf文件

Blazor使用PDFObject预览pdf文件相关推荐

最新文章

热门文章