- Run the command to install pdftron webviewer package
npm install @pdftron/webviewer
OR
yarn add @pdftron/webviewer - Copy all folders and files from
node_modules/@pdftron/webviewer/public
to
public/webviewer/lib - Create a component using code:
import {useEffect, useRef} from 'react';
import WebViewer from '@pdftron/webviewer'
const ComponentName = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: '/webviewer/lib',
initialDoc: “{{FILEPATH}}’',
},
viewer.current,
).then((instance) => {
const { documentViewer } = instance.Core;
// you can now call WebViewer APIs here...
});
}, [{{FILEPATH}}]);
return (
<div className="ComponentName">
<div className="header">React PDF Webviewer Sample</div>
<div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
</div>
);
};
*NOTE*:
- {{FILEPATH}} is the file path reference.
- The above example is for non-commercial use. For commercial use, one more line is added, i.e.
{
path: '/webviewer/lib',
licenseKey: 'xxxxxxxxxxxxxxx',
initialDoc: “{{FILEPATH}}’'
}
StudySection gives an opportunity to beginners and experts in .NET framework to go through StudySection’s .NET certification exam and get a .NET certification for enhancement of career in programming. If you have knowledge of the .NET framework then you can get a certificate through an online exam at StudySection.
