Product: Core Engine
Product Version:
“@pdftron/webviewer”: “^8.9.0-20221015”,
“@pdftron/webviewer-bim-client”: “^1.4.0”,
Please give a brief summary of your issue: not sure how to use Core in a react app
Please describe your issue and provide steps to reproduce it:
Hi! today I started reading some docs about how to use apryse “Core” with no Viewer, than I encountered this doc: Without-viewer | Apryse Documentation
as mentioned, the files are imported with a tag. although that’s not a common behavior for a React App. has someone achieved usage of “Core” that way? If yes I would be happy for code/ideas and examples.
P.S: I tried achieving the ‘Core’ behavior with “WebViewer” (I already have the setup in my Project), and instead of giving a reference for “HTMLElement” (usually ref), I used “document.createElement(‘div’)”.
It seems that WebViewer didnt like the behavior and I couldnt get a “WebViewerInstance”
1 Like
Hi omernakash7,
Would it be possible for you to provide us with a minimal sample project, so we can conduct our internal testing?
You can also check our Custom UI demo: GitHub - PDFTron/webviewer-react-sample at custom-ui-demo
Not entirely sure how it would behave with BIM (might need a license key to make it work properly).
You can check our BIM Client and Server Guides here: Bim | Apryse Documentation
*A minimal runnable reproducible sample refers to a simplified version of your project where unrelated/unnecessary code has been removed. The issue should still be reproducible in this simplified version.
This helps us isolate and understand the problem more efficiently. You can attach your project here or provide us with a download link or GitHub repo.
Hi Bjovanovic, thanks for the reply.
what I want to achieve is: Using webviewer with no UI
using the “Core” functions with no ‘initialDoc’ (I want to execute “Core.createDocument” from an array that includes multiple file url’s than use “getFileData” with xfdf annotations.
My issue is, in Apryse docs the guide says to import 2 files with a “” tag. which is not a standart way to import in a React App.
My question is: I am not so familliar with Apryse file structure. is there any way to import those modules (‘webviewer-core-min.js’ and ‘pdf/PDFNetLean.js’ from this article using the ‘import’ statement?
*I will need to import a Component or a Class
What I already tried doing:
a) Importing the mentioned files with a “script” tag using React “useEffect”. => throws an error
b) Using “WebViewer” function which returns a “WebViewerInstance” => code stops running, not throwing an error.
I only wrote a single function yet:
const functionToIterate = async (imgArr: FileItems[]) => {
console.log(imgArr)
const blobArr = []
imgArr.forEach(async (file) => {
const tempDiv = document.createElement('div')
const webViewerInstance = await WebViewer({ licenseKey: ServerLicense, path: `${process.env.PUBLIC_URL}/webviewer/lib` }, tempDiv);
console.log(webViewerInstance)
const xfdfString = await getAnnotations(file.id)
console.log(xfdfString)
console.log(`instance`)
const { createDocument, enableFullPDF, PDFNet } = webViewerInstance.Core
createDocument(file.file, { l: ServerLicense, extension: 'pdf' })
.then(doc => {
doc.getFileData({ xfdfString })
.then(async data => {
const arr = new Uint8Array(data)
const blob = new Blob([arr], { type: 'application/pdf' })
enableFullPDF();
PDFNet.initialize();
const doc = await PDFNet.PDFDoc.createFromBuffer(arr);
const pdfdraw = await PDFNet.PDFDraw.create(92);
const itr = await doc.getPageIterator(1);
const currPage = await itr.current();
const pngBuffer = await pdfdraw.exportBuffer(currPage, 'PNG')
const pngBlob = new Blob([pngBuffer], { type: `image/x-png` })
console.log(URL.createObjectURL(pngBlob))
})
})
})
}
1 Like