Author - StudySection Post Views - 191 views
Webviewer

PDF Webviewer in React.js

  1. Run the command to install pdftron webviewer package
    npm install @pdftron/webviewer
    OR
    yarn add @pdftron/webviewer
  2. Copy all folders and files from
    node_modules/@pdftron/webviewer/public
    to
    public/webviewer/lib
  3. 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*:

  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. Required fields are marked *

fiteesports.com rivierarw.com cratosroyalbet betwoon grandpashabet grandpashabet giriş deneme bonusu veren siteler casino siteleri