How do I load a PDF from an API call/arrayBuffer

Technical Support
, ,
1

Product: PDFViewer Web

Product Version: 8.2.0

Please give a brief summary of your issue:
(Think of this as an email subject)
The PDFViewer throws an error that says the arrayBuffer is not a PDF, while the file has been tested with a locally running PDF viewer. Third party file modules have confirmed the arrayBuffer is a valid PDF too. I need arrayBuffer because the PDF is a response from an API. The API does not host the file, it generates a preview PDF that is deleted after the API call is complete.

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
Load an arrayBuffer from an API call into PDFViewer.

    const arr = new Uint8Array( arrayBuffer );
    const blob = new Blob( [ arr ], { type: "application/pdf" } );

    WebViewer(
        {
            path: "/webviewer/lib",
        },
        this.viewer.current,
    ).then( ( instance ) => {
        const { documentViewer, annotationManager, Annotations } = instance.Core;
        instance.UI.loadDocument( blob, { filename: "test.pdf" } );
    } );

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello there.

This API should work with blobs as well. What’s the exact error message you are getting? Is the download complete when you set the blob variable value?

3

Yes, I’m using the following code.

const { data } = yield call( axios.post, /contracts/${ contractType }/preview, payload, {
responseType: “arraybuffer”,
onDownloadProgress: ( progressEvent ) => {
const percentCompleted = Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total );
console.log( percentCompleted );
if ( percentCompleted === 100 ) {
console.log( “Done” );
}
},
} );

The viewer starts loading after it prints “Done”.

This error is thrown:
Exception: Message: PDF header not found. The file is not a valid PDF document.
Filename:
Function: SkipHeader
Linenumber:

4

Hello Mario,

Thank you for this code snippet, assuming the PDF is an valid PDF, this could be the result of the document not being fully downloaded before loading.

Instead of using yield I would suggest using async/await. This would ensure the document has been fully downloaded and then passing that into loadDocument.

Let me know if that works for you!

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com