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);
    }
}

参考资料:

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

javascript - Embed a Blob using PDFObject - Stack Overflow

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值