Author - StudySection Post Views - 47 views

PDF Webviewer in React.js

  1. Run the command to install pdftron webviewer package
    npm install @pdftron/webviewer
    yarn add @pdftron/webviewer
  2. Copy all folders and files from
  3. Create a component using code:
    import {useEffect, useRef} from 'react';
    import WebViewer from '@pdftron/webviewer'
    const ComponentName = () => {
    const viewer = useRef(null);
    useEffect(() => {
    path: '/webviewer/lib',
    initialDoc: “{{FILEPATH}}’',
    ).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>


  1. {{FILEPATH}} is the file path reference.
  2. 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.

Leave a Reply

Your email address will not be published.