We currently are using an older version of Webviewer (jquery) in an Angular 8 project.
We needed to retain the same layout and controls of the older version Webviewer for our update. So we decided to rebuild the UI using the PDFTron webviewer custom ui 7 found here: https://github.com/PDFTron/webviewer-custom-ui
The webviewer-custom-ui is build in React and we need to integrate it into our Angular Project.
into the build directory but that didn’t work.It work render the default ui.
I next turned to the WebViewer global method to see if there’s something I’m missing to configure.
According to the documentation, https://www.pdftron.com/api/web/global.html#WebViewer__anchor
The WebViewerOptions’ ui property description can only accept “default” or “legacy” as a value.
What WebViewerOptions configurations are require for a custom-ui?
Yes, we built our own custom webviewer UI using the https://github.com/PDFTron/webviewer-custom-ui.
So we have expanded the custom UI project to include all the tools and layout we need, which is in React
Our existing project is built on Angular.
We would like to integrate the custom UI react project just like the default webviewer UI.
This is where help is needed.
The Webviewer global method is used to instantiate the default webviewer UI.
The Webviewer global method takes a WebViewerOptions object then returns a promise.
For the WebViewerOptions, what would be the proper configuration needed to load our custom UI?
If this isn’t going to work, can you recommend an alternative method to integrating the webviewer into our Angular project?
Thanks
The reason for upgrading webviewer is that the old version won’t render some newer PDFs with OCR and the current version of webviewer does.
Our management and user base requires that the webviewer layout and tools remain the same.
Keep in mind we have an existing Angular app using an older jQuery based version of webviewer ui.
We are not rewriting our Angular app. We are just replacing the webviewer part.
Because the current default webviewer ui is very different from the old one we needed to create a custom ui.
That is were I found the link to the react webviewer custom ui project: https://github.com/PDFTron/webviewer-custom-ui
Using the pdftron webviewer custom ui project we were able to customize the ui to meet our needs.
Now one of the last hurdle is to integrate the webviewer custom ui (react) into our existing app (angular).
I did try following the step you provided but like you said, were not on the same page.
That’s for creating a webviewer from scratch and not creating an instance of an existing webviewer.
I guess the WebViewer global method is only for the default webviewer ui and cannot be used with webviewer custom ui.
Well, I’m looking into micro frontends now. Let me know if you have any recommendations.