How to Integrate ComPDFKit Web SDK Using NPM

Manually integrating ComPDFKit PDF SDK for Web into your project can seem like a hard task as its steps are complicated, which is time-consuming and prones to error. NPM (Node Package Manager) provides a way for JavaScript developers to easily manage project dependencies, ensuring that all the necessary modules and SDKs are properly installed, updated, and maintained.

If you are aiming for a seamless integration that doesn't interrupt your existing codebase, follow this tutorial to learn how to integrate ComPDFKit Web SDK using NPM. Our Web SDK npm package provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate, and manipulate PDFs that can be embedded into any web project. With only several steps and a few lines of code, developers can successfully integrate ComPDFKit for Web in minutes.

Requirements

To integrate ComPDFKit for Web in your browser, you must have a development environment and a browser.

• Get a free trial license to test your project.

• The latest stable version of Node.js.

• ComPDFKit for Web supports most mainstream browsers, and it's better to use the latest version. IE browser is not supported currently.

Step 1. Install WebViewer

Install the ComPDFKit for Web package and add it as a project dependency.

npm i @compdfkit_pdf_sdk/webviewer --save

Step 2. Copy Assets to Your Static Folder

These assets need to be served in your application. Copy the ComPDFKit for Web library's assets to the static directory in your project’s root 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. Import and Initial the WebViewer

Import WebViewer into your application and initialize ComPDFKit for Web in JavaScript by mounting to the element.

import WebViewer from '@compdfkit_pdf_sdk/webviewer'
​
const element = document.getElementById('viewer');
​
WebViewer({
  pdfUrl: 'URL of your PDF File' // the path of your document
  license: 'Input your license here'
}, element).then((instance) => {
  // Call APIs here
})

Step 4. Apply the License Key

If you want to use the ComPDFKit license for your application, we offer two types of licenses: trial license and full license.

1. Initiate contact with our sales team by completing the requirements form on the Contact Sales page of the ComPDFKit official website.

2. After receiving your submission, our sales team will reach out to you within 24 hours to clarify your requirements.

3. Upon confirmation of your requirements, you will be issued a complimentary trial license valid for 30 days. Throughout this period, any issues you encounter will be supported with free technical assistance.

4. If you are satisfied with the product, you have the option to purchase the formal license. Once the transaction is completed, our sales team will send the official license to you via email.

Example

You can fill in the license with the key in the init function to apply the license key:

// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";
​
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: '<Input your license here>'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo');
  })
})

For other steps and example codes, you can reach out to the comprehensive documentation of ComPDFKit for Web.

Final Words

You can now seamlessly integrate ComPDFKit PDF SDK for Web with NPM to your Web project. If you're interested in delving deeper into utilizing ComPDFKit's JavaScript PDF library for Web, our comprehensive documentation offers detailed tutorials on various functionalities such as extracting data from PDFs, converting to or from PDFs, and so forth. It is welcome to try our Web Demo and PDF Extract Demo to experience PDF features and test how they perform.

Resources and Support

• Full documentation for ComPDFKit for Web can be found here.

• For detailed information, please visit our Guides page.

• Stay updated with the latest improvements through our Changelog.

• For technical assistance, please reach out to our Technical Support.

• For troubleshooting and FAQs, please start a discussion on our GitHub.

• To get more details and an accurate quote, please contact our Sales Team.