How to Make a Vue.js App With ComPDF for Web

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.
• Apply the License Key: Contact ComPDFKit's sales team to get a free 30-day license to test the project.

Create a New 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

Add ComPDF for Web

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 -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./public/webviewer

Display a PDF

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

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({
    path: '/',
    pdfUrl: './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:

The template section is responsible for 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.

The script section allows us to 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.

Next, inside the onMounted lifecycle method (which gets called when the element is mounted) we call the WebViewer constructor and use the passed-in properties.

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.

Learn more about WebViewer’s comprehensive functionality by diving into the documentation.

Lastly, the style section helps us apply custom CSS like width and height on the viewer’s div element, which WebViewer gets mounted on.

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 and open it in your default browser:

npm run dev