Error Failed to load PDF document LWC

Question

I am facing an issue while trying to generate PDF file using LWC component. I fetch data from a HTTP callout and try to generate a PDF file out of the response and display using LWC. What can be the root cause of this error message?

Error Message:

Error Failed to load PDF document.

URL displayed in the new window address bar: blob:https://mybox.sandbox.lightning.force.com/3dfde707-8bb4-4d55-b36d-25dccabdf7d9

import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';


export default class Z_PDFViewer extends NavigationMixin(LightningElement) {
    @api recordId;
    pdfBlobUrl;

    @wire(generatePDF, { recordId: '$recordId' })
    wiredPDF({ error, data }) {
        if (data) {
            console.log('PDF Content:', data);
            const blob = new Blob([data], { type: 'application/pdf' });
            this.pdfBlobUrl = URL.createObjectURL(blob);
        } else if (error) {
            console.error('Error generating PDF:', error);
        }
    }

    handleClick() {
        //window.open(this.pdfBlobUrl, '_blank');
        console.log('Blob URL:', this.pdfBlobUrl);
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: this.pdfBlobUrl
            },
        });
    }
}

HTML:
<template>
    <div>
        <a onclick={handleClick} href="javascript:void(0);">Open PDF in New Window</a>
    </div>
</template>

Answer 1

One possible reason why you are getting the error "Failed to load PDF document" when you try to generate a PDF file using LWC component is that the data that you are passing to the Blob constructor is not in the correct format.

According to the documentation of the Blob class, the data parameter should be an array of ArrayBuffer, ArrayBufferView, Blob, DOMString, or other objects that can be converted to strings. However, in your code, you are passing the data directly from the HTTP callout, which may not be compatible with the Blob constructor.

To solve this issue, you can try to convert the data to an ArrayBuffer or a Uint8Array before passing it to the Blob constructor.

For example, you can use something like this in your JavaScript file:

@wire(generatePDF, { recordId: '$recordId' })
wiredPDF({ error, data }) {
        if (data) {
                console.log('PDF Content:', data);
                // Convert the data to an ArrayBuffer
                let buffer = new ArrayBuffer(data.length);
                let view = new Uint8Array(buffer);
                for (let i = 0; i < data.length; i++) {
                        view[i] = data.charCodeAt(i);
                }
                // Create a blob from the buffer
                const blob = new Blob([buffer], { type: 'application/pdf' });
                this.pdfBlobUrl = URL.createObjectURL(blob);
        } else if (error) {
                console.error('Error generating PDF:', error);
        }
}

This code will convert the data to an ArrayBuffer and then create a blob from it. This may fix the error and allow you to load the PDF document in a new window.