Build a Web PDF Viewer with React

Integrating the PDF SDK with React to build a PDF web viewer can significantly enhance the document viewing experience. In this blog, we will provide a comprehensive guide on using React to integrate PDF SDK.

React's efficient component-based architecture and state management capabilities make it ideal for developing interactive and responsive PDF applications. By following our step-by-step instructions, you'll be able to build a powerful PDF web viewer using the PDF SDK under the React framework. For more information, see the complete ComPDFKit for Web documentation. Let’s start the journey of building PDF SDK using React.

Requirements to Integrate PDF SDK with React

PDF SDK on Web App

To get started, you'll need:

- The latest stable version of Node.js.

- A package manager compatible with npm.

- Apply for a license online (Free for 30 days)

Step 1: Create Your PDF Viewer Project

1. Create a new React project:

npx create-react-app compdfkit-app

2. Change your directory to compdfkit-app:

cd compdfkit-app

Step 2: Install Webviewer & Copy Resources

1. Install web viewer as a dependency with npm:

npm i @compdfkit_pdf_sdk/webviewer --save

2. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web demo, to your project’s public resource folder.The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.

cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./public/webviewer

Step 3: Display the PDF

1. Add the PDF document you want to display to the public/webviewer/example directory. You can use our demo document as an example.

2. When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path.

Add the following code to your src/webviewer.js file:

import { useEffect, useRef } from 'react';
import ComPDFKitViewer from '@compdfkit_pdf_sdk/webviewer';

export default function WebViewer() {
  const containerRef = useRef(null);

  useEffect(() => {
    let docViewer = null;

    ComPDFKitViewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, containerRef.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  }, []);
  
  return <div ref={containerRef} style={{ width: "100%", height: "100vh", overflow: "hidden" }} />
}

3. Replace the contents of the src/App.js file with the following. This includes the newly created component in your app:

import WebViewer from './webviewer.js';

function App() {
  return (
    <div className="App">
      <WebViewer />
    </div>
  );
}

export default App;

4. Start the app and open it in your default browser:

npm start

License

By using PDF SDK with React, you can develop robust Web PDF applications. You have the convenience of applying for a license directly online, streamlining the process for you.

For further details, please reach out to the dedicated sales team. It is important to note that each license is valid for the root domain and its subdomains exclusively. Moreover, it is strictly prohibited to distribute any documents, sample codes, or source codes from the ComPDFKit PDF SDK package to external parties.

Final Words

Now that you have learned how to build Web PDF applications with React. If you want to dive deeper into the capabilities of ComPDFKit for Web, we provide extensive documentation that details various features, including data extraction, PDF conversion, and more.

To experience the power and diversity of ComPDFKit for Web first-hand, we invite you to try our Web Demo and PDF Extraction Demo. These demos will revolutionize the PDF capabilities of your web applications!

Resources & Support

ComPDFKit has a professional R&D team that produces comprehensive technical documentation and guides to help developers. Also, you can get an immediate response when reporting your problems to our support team.

• Full documentation for ComPDFKit for Web can be found here.
• Stay updated with the latest improvements through our Changelog.
• For technical assistance, please reach out to our Technical Support.
• To get more details and an accurate quote, please contact our Sales Team.