View PDF files in Vue.js applications
GemBox.PdfViewer is a customizable JavaScript UI component that enables you to easily display PDF files in your Vue.js web applications with just a few lines of code. A large set of features like search, text selection, print, digital signing, saving, navigation, and custom theme support will add the look and feel of standalone PDF applications to your Vue.js applications.
The following live demo demonstrates the GemBox PDF Viewer in action:
How to add the PDF Viewer to your Vue.js application?
1. Install GemBox PDF Viewer
To add GemBox.PdfViewer to your Vue.js application using NPM or Yarn, use the following commands:
npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer2. Create the reusable Vue.js PDF Viewer component
Now you can use GemBox.PdfViewer in your Vue.js components. The following example is a basic PDF Viewer component that displays an existing PDF file:
<template>
<div ref="viewerElement" class="viewer"></div>
</template>
<script setup>
import { onMounted, ref, defineProps } from "vue";
import { GemBoxPdfViewer } from '@gembox/pdfviewer'
import '@gembox/pdfviewer/dist/es/pdfviewer.css';
const props = defineProps({
initialDocument: {
type: String,
default: null
}
});
GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");
const viewerElement = ref(null)
onMounted(() => {
GemBoxPdfViewer.create({
container: viewerElement.value,
initialDocument: props.initialDocument
});
});
</script>
<style scoped>
.viewer {
width: 600px;
height: 350px;
}
</style>
You can save this component as PdfViewer.vue and use it throughout your Vue.js application as needed.
3. Display PDF files in your Vue.js app
To display existing PDF documents you can use the Vue.js component created in the previous step:
<template>
<!-- Initializes PDF Viewer with a HelloWorld.pdf file -->
<PdfViewer initial-document="/HelloWorld.pdf"/>
<!-- Shows empty PDF Viewer -->
<!--<PdfViewer/> -->
</template>
<script setup>
import PdfViewer from "/src/components/PdfViewer.vue";
</script>
What next?
GemBox PDF Viewer will allow your users to read existing PDF files from your Vue.js applications. Check the other examples for more information about GemBox.PdfViewer's rich set of features and customizations that will allow you to tailor the PDF viewer to your specific requirements.
