export async JavaScript function in Blazor

Question

Hi, why doesn't this work?

import 'https://mozilla.github.io/pdf.js/build/pdf.mjs';

export async function pdfToImages(b64, url) {
    var { pdfjsLib } = globalThis;
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs';

    var images = [];
    let currPage = 1;

    var loadingTask;
    if (b64 != '') {
        loadingTask = pdfjsLib.getDocument({ data: atob(b64) });
    }
    else {
        loadingTask = pdfjsLib.getDocument(url);
    }

    const thePDF = await loadingTask.promise;
    const numPages = thePDF.numPages;

    while (currPage <= numPages) {
        const page = await thePDF.getPage(currPage);

        let viewport = page.getViewport({ scale: 1.5 });
        let canvas = document.createElement("canvas");
        let context = canvas.getContext('2d');

        let outputScale = window.devicePixelRatio || 1;
        canvas.width = Math.floor(viewport.width * outputScale);
        canvas.height = Math.floor(viewport.height * outputScale);

        let transform = outputScale !== 1
            ? [outputScale, 0, 0, outputScale, 0, 0]
            : null;

        page.render({
            canvasContext: context,
            transform: transform,
            viewport: viewport
        });

        currPage++;
        const img = canvas.toDataURL('image/png');
        images.push(img);
    }

    return images;
}

public async Task<string[]?> PdfToImagesAsync(string pdfAsBase64)
{
    var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./pdfHelper.js");
    return await module.InvokeAsync<string[]>("pdfToImages", pdfAsBase64, "");
}

Answer 1

Hi @Thomas Wycichowski,

I debug your js code and get the images successfully in js. But it does not get the value in blazor side.

To resolve such issue, here is a workaround to increase the size for SignalR:

builder.Services.AddSignalR(e => {
    e.MaximumReceiveMessageSize = 102400000;
});

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena