How to Integrate ComPDFKit Web SDK in a Vue.js App

In today's digital landscape, web applications are indispensable due to their ability to run on any device with a browser, significantly broadening accessibility and eliminating the need for separate development for different operating systems. Vue.js is a progressive JavaScript framework for building user interfaces and SPAs, offering a structured approach for web app development with declarative rendering, component-based architecture, and reactivity.

For developers aiming to incorporate advanced PDF functionalities into their web applications, ComPDFKit Web SDK emerges as a robust solution. Read and follow this tutorial to integrate ComPDFKit Web SDK into your Vue.js Project and see the performance of processing PDFs in Web bowsers.

Prerequisites

To get started, you'll need:

• Install Node.js version 18.3 or higher for creating Vue3 project.

• A package manager compatible with npm.

• Obtain License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Step 1. Create a New Vue.js Project

1. Create a new Vue.js project using a terminal:

npm create vue@latest

2. During the setup process, Vue.js will prompt you with a series of questions, allowing you to customize your project. For this example, we usually use the defaults.  

3. Change your directory to compdfkit-app:

cd compdfkit-app

Step 2. Install Webviewer from NPM & Copy Resources

1. Install webviewer 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

Sample: Display a PDF Document in Your Vue.js App

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

2. src/components/WebViewer.vue —— Create a new component called WebViewer.vue under src/components.

<template>
  <div id='webviewer' ref='viewer'></div>
</template>
​
<script setup>
import { ref, onMounted } from 'vue'
import WebViewer from '@compdfkit_pdf_sdk/webviewer'
​
const viewer = ref(null)
let docViewer = null
​
onMounted(() => {
  WebViewer.init({
    pdfUrl: '/webviewer/example/developer_guide_web.pdf',
    license: '<Input your license here>'
  }, viewer.value).then((instance) => {
    docViewer = instance.docViewer
​
    docViewer.addEvent('documentloaded', async () => {
      console.log('document loaded')
    })
  })
})
</script>
​
<style>
#webviewer {
  height: 100vh;
  overflow: hidden;
}
</style>

Here’s how the above code works:

• Template Section: binding the data and rendering the DOM to the Vue instance's data. In this case, we are adding our viewer div so we can mount WebViewer to use as our Vue.js PDF reader.

• Script Section: declare WebViewer as a Vue component. It also lets us pass in the path to WebViewer’s lib folder location, as well as the initial PDF we want to load.

• onMounted Lifecycle Method: gets called when the element is mounted. We call the WebViewer constructor and use the passed-in properties.

• Style Section: apply custom CSS like width and height on the viewer's div element, which WebViewer gets mounted on.

When WebViewer is initialized, it returns an instance of WebViewer that can be used to call a number of useful APIs for document creation, manipulation, annotation, collaboration, and more.

If you want to learn about how to integrate other PDF functionality, please dive into the comprehensive documentation of ComPDFKit for Web.

3. src/App.vue —— Here we can drop in our newly created WebViewer component.

• Add the WebViewer component inside the template section.

• Import the WebViewer component in the export statement inside the script section.

• Customize WebViewer styles inside the style section.

<template>
  <WebViewer />
</template>
​
<script setup>
import WebViewer from './components/WebViewer.vue'
</script>
​
<style>
#app {
  display: block;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
</style>

4. Start the app:

npm run dev

You can see the Vue.js application you created by running on http://localhost:5173 on any browser.

License

ComPDFKit for Web supports flexible licensing options, please contact our sales team to know more. Each license is only valid for a root domain name and any of its subdomains. However, any documents, sample code, or source code distribution from the released package of ComPDFKit PDF SDK to any third party is prohibited.

Final Words

Congratulations! You have succeeded in integrating ComPDFKit Web SDK into your Vue.js project, elevating your web application with powerful PDF features, enhancing user experience and expanding functionality. If you're eager to delve deeper into the capabilities of ComPDFKit for Web, our extensive documentation offers detailed tutorials covering a wide range of functionalities, including data extraction, PDF conversion, and more.

To experience firsthand the power and versatility of ComPDFKit for Web, we invite you to try our Web Demo and PDF Extract Demo. These demos provide a hands-on opportunity to explore PDF features and evaluate their performance in action. Unlock the potential of ComPDFKit for Web and revolutionize your web application's PDF capabilities today!

Resources & 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.

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