Also, give your class component code you want to place WebViewer in, and I will fill it out where WebViewer code should be placed.
viewerDiv = React.createRef<HTMLDivElement>();
componentDidMount() {
console.log('viewerDiv :: ',this.viewerDiv)
WebViewer(
{
//path: 'PdftronLib',
path: '../../Common/lib',
initialDoc: '',
},
this.viewerDiv.current as HTMLDivElement,
)
.then((instance) => {
console.log('here');
});
}
//modal
<Modal centered={true} isOpen={this.state.isPdftronShow} className="modal-dialog bh--modal modal-dialog-centered" >
<div className="modal-header">
<button
type="button"
className="close bh--close"
onClick={() => this.setState({ isPdftronShow: false })}
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<ModalBody>
<div className="row justify-content-center align-self-center">
<div className="App">
<div className="webviewer" ref={this.viewerDiv} style={{ width: '100%', height: '100%' }}></div>
</div>
</div>
</ModalBody>
</Modal>
@BossRizwan looks correct for the most part, you can cross-check our repo sample before we updated it to hooksmhttps://github.com/PDFTron/webviewer-react-sample/blob/92edf49ca363c8d508c69aa11235a0def4a26872/src/App.js
Yes, you should be able to. WebViewer can handle file opening from multiple sources: https://www.pdftron.com/documentation/web/guides/basics/open/url/.
You might need to pass an additional auth-token: https://www.pdftron.com/documentation/web/guides/basics/open/url/#additional-options.
Let me know if that works and what did you have to do.
Dear @Andrey, Actually we have these types of google drive URLs. and want to open these file into pdf Tron then do some changes and save it, after saved the annotation, the google drive file auto-updated.
Is it’s possible? if yes, kindly send me some references and help material for it.
kindly check the below files also
File No# 1. testimage.jpg - Google Drive
File No# 2. Muhammad's Resume.pdf - Google Drive
Thanks, this kind of falls out of our domain expertise, but I found this guide that will be helpful: Download files | Google Drive API | Google Developers. You can get the stream/blob/file and then pass it to WebViewer.
I will look into it as well.
Awesome, it would be great if you could share the snippet, ofc, please remove any API keys or tokens. This would help the community.
@Andrey why not,
fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`,
{
method: 'GET',
headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' },
}).then(res => res.blob()).then(blob => {
WebViewer(
{
path: 'lib',
//initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf',
},
viewerDiv.current as HTMLDivElement,
)
.then(instance => {
instance.loadDocument(blob, { filename: `${filename}`});
instance.enableElements(['leftPanel', 'leftPanelButton']);
const { docViewer } = instance;
const annotManager = docViewer.getAnnotationManager();
}
});
});
});
1 Like
@Andrey
I have faced another issue, Actually, I have made some changes to an image file, and save it. Why the image format change to pdf? how I can get image file?
here is a code, I want image file not pdf in any case:
instance.setHeaderItems(header => { header.push({ type: 'actionButton',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
onClick: () => {
const doc = docViewer.getDocument();
annotManager.exportAnnotations().then(xfdfString => { const options = { xfdfString, };
doc.getFileData(options).then(data => {
const arr = new Uint8Array(data);
const updateBlob = new Blob([arr],
{ type: 'image/jpeg'//'application/pdf'
});
const formData = new FormData();
formData.append('file', updateBlob, `${fileName}`);
//google drive update file API call here
}
});
});
Thank you for sharing the snippet.
We convert it to a PDF since we want to provide the same annotation experience on images as well. Images do not have annotation specification.
Potentially what you can do is export a high res image: https://www.pdftron.com/documentation/web/guides/create/thumbnail/#create-a-high-resolution-page-image-with-annotations. You can do png or jpeg and go as high quality as you want plus option to merge annots inside of image.
@Andrey, I have faced another issue, kindly find the attachment file.
normally PdfTron working fine. but if our screen in idle mode. in that case, I opened PdfTron but at that time error occur. kindly guide me, How I can fix it?
What is the idle mode? Does the file location change?
Could you test whether this rewrite would work?
WebViewer(
{
path: 'lib',
},
viewerDiv.current as HTMLDivElement,
)
.then(instance => {
instance.loadDocument(`https://www.googleapis.com/drive/v3/files/${fileId}?alt=media`, {
filename: `${filename}`,
customHeaders: {
Authorization: `Bearer ${token}`,
Accept: 'application/json'
}
});
});
Thanks for trying it out for me. I guess please go back to the way you were doing it.
Also: