Blazor使用PDFObject预览pdf文件

原创已于 2022-05-02 10:37:00 修改 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#c#

于 2022-04-15 09:27:29 首次发布

Blazor 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在ASP.NET Core Blazor应用中利用JavaScript互操作性，结合PDFObject库来预览后端返回的PDF文件流。首先创建一个script.js文件并引入PDFObject.js，然后定义一个async函数showPdf用于转换和嵌入PDF。接着，在JsInterop.cs文件中定义C#方法调用JavaScript函数。最后，在 PdfFile.razor 页面中注入JsInterop并调用预览方法。通过这种方式，实现了Blazor组件中预览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);
    }
}