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;
4
Replies
AdChoices