PDF Embed API: Intermittently stuck on "Opening Document 0%"

Community Beginner ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

I am using the PDF Embed API to display a local PDF and am experiencing an issue where the PDF Viewer is stuck on "Opening Document 0%" about half the time that I open it.  I've followed the sample for React provided by Adobe.  I've tried using a URL as well as a promise.  I've tried doing a timeout call to see if it was an async timing issue but it still happens.  Has anyone else experienced this?  I know it's not a problem with the PDF because half the time it loads correctly and everything is fine.  

 

React Typescript Implementation:

 

const Bill: React.SFC<BillProps> = (props) => {
    const bill = props.billDetails;
        
    const viewSDKClient = new ViewSDKClient();
    viewSDKClient.ready().then(() => {
        //const blob = await getBillImageLocation(String(bill.controlNumber));
        //const url = window.URL.createObjectURL(blob);
        viewSDKClient.previewFileUsingFilePromise("pdf-div", getBillImageArrayBuffer(String(bill.controlNumber)), bill.controlNumber + ".pdf");
        viewSDKClient.registerEventsHandler();
    });

    async function handleOpenBillImageViewerTab(e: React.UIEvent<HTMLElement>) {
        // Call preventDefault to keep page from refreshing on form submit
        e.preventDefault();
        
    }
    return (
        <Container fluid onLoad={handleOpenBillImageViewerTab}>
            <Card>
                <CardBody>
                    <Row>
                        <Col xs={3}><label>Control Number:</label> {bill.controlNumber}</Col>
                        <Col xs={3}><label>Provider:</label> {bill.provider}</Col>
                        <Col xs={3}><label>Bill Total:</label> {bill.billTotal}</Col>
                        <Col xs={3}><Input type="button" onClick={handleOpenBillImageViewerTab} value='Open Bill Image' /></Col>
                    </Row>
                    <Row>
                        <Col xs={6}>
                            {bill.accountInvoices.map((invoice, index) => <AccountInvoice accountInvoice={invoice} key={index} />)}
                        </Col>
                        <Col xs={6}>
                            <div id="pdf-div" className="full-window-div" />
                        </Col>
                    </Row>
                </CardBody>
            </Card>
        </Container>
    );
};

export default Bill;

 

 Fetch:

 

export default async function getBillImageArrayBuffer(controlNumber: string): Promise<ArrayBuffer> {

    const headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    };
    const response = await fetch('api/Bill/GetBillImageLocation?controlNumber=' + controlNumber, { method: 'POST', headers: headers });
    return await response.arrayBuffer();
}

 

API Controller:

 

[HttpPost]
        [Route("GetBillImageLocation")]
        //[Authorize(Policy = "AD.User")]
        public async Task<ActionResult> GetBillImageLocation(string controlNumber)
        {
            try
            {
                var billImageLocation = _billQuery.GetBillImage(controlNumber);
                var provider = new FileExtensionContentTypeProvider();
                if (!provider.TryGetContentType(billImageLocation, out var contentType))
                {
                    contentType = "application/octet-stream";
                }
                //return new JsonResult(result);
                var bytes = await System.IO.File.ReadAllBytesAsync(billImageLocation);
                return File(bytes, contentType, Path.GetFileName(billImageLocation));
            }
            catch (System.Exception ex)
            {
                _logger.LogError(ex, "Error loading the bill data");
                throw;
            }
        }

 

Adobe SDK Implementation:

 

class ViewSDKClient {
    constructor() {
        this.readyPromise = new Promise((resolve) => {
            if (window.AdobeDC) {
                resolve();
            } else {
                /* Wait for Adobe Document Services PDF Embed API to be ready */
                document.addEventListener("adobe_dc_view_sdk.ready", () => {
                    resolve();
                });
            }
        });
        this.adobeDCView = undefined;
    }

    ready() {
        return this.readyPromise;
    }
previewFileUsingFilePromise(divId, filePromise, fileName) {
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View({
            /* Pass your registered client id */
            clientId: "2e64883835ea45b0879a04088a7c6933",
            /* Pass the div id in which PDF should be rendered */
            divId,
        });

        /* Invoke the file preview API on Adobe DC View object */
        this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* pass file promise which resolve to arrayBuffer */
                promise: filePromise,
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: fileName
            }
        }, {});
    }
}

export default ViewSDKClient;

 

TOPICS
PDF Embed API

Views

64

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

Are you sure that what's getting fetched is a PDF?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

Yes.  I'm sure that it's the PDF being returned.  The service I'm using to retrieve the file only returns PDF's and, as I mentioned, the PDF does come up for me half the time.  So I know it's not the data.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

Ok - got it. Are you trying to swap out different PDF files using the same AdobeDCView object?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 26, 2021 May 26, 2021

Copy link to clipboard

Copied

LATEST

No.  It creates a fresh Adobe DCView each time the page loads.  It does get called twice due to React.StrictMode but it creates a new instance each time it's called so that's not the issue.  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines