Hi,
I'm currently developing a React Typescript website for reviewing and sorting PDFs. To display the PDFs I use the embed api.
Unfortunately I always get a message that my domain is not authorized. But this is not true. I have registered the domain that leads to the UI. The PDFs are provided via API but given via a FilePromise of the Adobe API to display. What could be the reason for this? After several times recreate the client security code times it works for a few minutes / hours and then again not at all.
Are there any official Typescript-React examples? But since it works every now and then, the logic should be correct?
Thanks for your help
Translated with www.DeepL.com/Translator (free version)
Best Regards
SDK implementation:
/*
Copyright 2020 Adobe
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it. If you have received this file from a source other than Adobe,
then your use, modification, or distribution of it requires the prior
written permission of Adobe.
*/
export 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;
}
previewFile(divId, viewerConfig, url, filename, id) {
const config = {
/* Pass your registered client id */
clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
};
if (divId) { /* Optional only for Light Box embed mode */
/* Pass the div id in which PDF should be rendered */
config.divId = divId;
}
/* Initialize the AdobeDC View object */
this.adobeDCView = new window.AdobeDC.View(config);
/* Invoke the file preview API on Adobe DC View object */
const previewFilePromise = this.adobeDCView.previewFile({
/* Pass information on how to access the file */
content: {
/* Location of file where it is hosted */
location: {
url: url,
/*
If the file URL requires some additional headers, then it can be passed as follows:-*/
headers: [
{
key: "Authorization",
value: `Bearer xxx`,
}
]
},
},
/* Pass meta data of file */
metaData: {
/* file name */
fileName: filename,
}
}, viewerConfig);
return previewFilePromise;
}
previewFileUsingFilePromise(divId, filePromise, fileName) {
/* Initialize the AdobeDC View object */
this.adobeDCView = new window.AdobeDC.View({
/* Pass your registered client id */
clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
/* 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
}
}, {});
}
registerSaveApiHandler(profile,callback) {
/* Define Save API Handler */
const saveApiHandler = (metaData, content, options) => {
console.log(metaData, content, options);
console.log("Save btn pressed");
callback(content);
return new Promise(resolve => {
/* Dummy implementation of Save API, replace with your business logic */
setTimeout(() => {
const response = {
code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
data: {
metaData: Object.assign(metaData, {updatedAt: new Date().getTime()})
},
};
resolve(response);
}, 2000);
});
};
this.adobeDCView.registerCallback(
window.AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
function() {
return new Promise((resolve, reject) => {
resolve({
code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
data: profile
});
});
},
{});
this.adobeDCView.registerCallback(
window.AdobeDC.View.Enum.CallbackType.SAVE_API,
saveApiHandler,
{}
);
}
registerEventsHandler() {
/* Register the callback to receive the events */
this.adobeDCView.registerCallback(
/* Type of call back */
window.AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
/* call back function */
event => {
console.log(event);
},
/* options to control the callback execution */
{
/* Enable PDF analytics events on user interaction. */
enablePDFAnalytics: true,
}
);
}
}
export default ViewSDKClient;
Function Component to View:
export const PDFView: React.FunctionComponent<PDFViewProps> = (props) =>{
console.debug('Rendering PDFView', props);
const { accounts } = useMsal();
const profile = {
userProfile: {
name: accounts[0].name,
email: accounts[0].username
}
};
const dispatch = useDispatch();
const viewSDKClient = new ViewSDKClient();
viewSDKClient.ready().then(() => {
fetch(getDownloadDocumentUrl(props.invoice.id),{
method: 'GET',
//Force to receive data in a Blob Format
headers: {
'Access-Control-Allow-Origin' : '*',
'Authorization': `Bearer xxxxx`,
}
}).then(res => {
viewSDKClient.previewFileUsingFilePromise("pdf-div", Promise.resolve(res.arrayBuffer()), props.invoice.name);
viewSDKClient.registerSaveApiHandler(profile,function(data : any){
if(props.invoice.id !== undefined)
dispatch(updateInvoiceContent(props.invoice.id, data));
});
}).catch(error => {
console.log(error);
});
});
return (<>
<div id="pdf-div" className="w-100"/>
</>);
}
2
Replies
AdChoices